wxml静态页面
<view class='box'>
<scroll-view scroll-y='true' style="height:{{height}}rpx" bindscrolltolower='lower'>
<view class="list" wx:for="{{res}}" wx:for-item="item" data-id="{{index}}" wx:key="index" style="height:{{(height/5)-1}}rpx;">
<view class="p1">{{item.time}}</view>
<view class="p2">{{item.record}}</view>
</view>
</scroll-view>
</view>
wxss样式部分
.box .list{
padding: 10rpx 0 0 0;
box-sizing: border-box;
text-align: left;
border-bottom: 1rpx solid #e6e6e6;
}
.box .p1{
color: #000000;
font-size: 28rpx;
line-height: 45rpx;
}
.box .p2{
color: #737373;
font-size: 24rpx;
line-height: 65rpx;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
js部分
data:{
height: '',
res: [
{
time:'2022/01/25',
record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'
},
{
time:'2022/01/26',
record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'
},
{
time:'2022/01/27',
record:'可回收垃圾（6kg),厨余垃圾（10kg),其他垃圾（4kg），有害垃圾（1kg）'
},
]
},
lower() {
var result = this.data.res;
var resArr = [];
for (let i = 0; i < 10; i++) {
resArr.push(i);
};
var cont = result.concat(resArr);
console.log(resArr.length);
if (cont.length >= 12) {
wx.showToast({ //如果全部加载完成了也弹一个框
title: '我也是有底线的',
icon: 'success',
duration: 1500
});
return false;
} else {
wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”
title: '加载中',
icon: 'loading',
});
setTimeout(() => {
this.setData({
res: cont
});
wx.hideLoading();
}, 1500)
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success: (res) => {
this.setData({
height: res.windowHeight
})
}
})
},
