1.WXML代码（粘贴不了，看截图）
列表部分
2.WXSS代码
/* component/ListView.wxss */
.list-view {
width: 100vw;
height: auto;
display: flex;
flex-direction: column;
}
.list-inner {
width: 100vw;
display: flex;
flex-direction: column;
}
.list-bottom {
display: flex;
width: 100vw;
height: 60rpx;
color: #898989;
font-size: 28rpx;
align-items: center;
background-color: #ddd;
justify-content: center;
}
3.JS代码
/*
自定义ListView可声明的属性：
list="{{list}}" //传递的列表数据
divHeight="30" //分割线的高度
divColor="#ddd" //分割线颜色
*/
var util = require("../../utils/util.js");
var isLoading = false;
var canLoadmore = true;
Component({
/* 启用多slot支持*/
options: {
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
//定义间隔数据
list: {
type: Array,
value: [],
},
divHeight: {
type: Number,
value: 0,
}
},
data: {
loadMsg: "加载中...",
},
/**
* 组件的方法列表
*/
methods: {
onClick: function(e) {
let index = util.getIndex(e);
this.triggerEvent('event', index);
console.log("itemClick" + index);
},
loadmore: function() {
if (canLoadmore) {
isLoading = true;
this.setData({
isLoading: isLoading
})
}
},
setNoMore: function() {
canLoadmore = false;
this.setComplete();
},
setComplete: function() {
isLoading = false;
this.setData({
isLoading: isLoading
})
}
}
})
网友评论