写了一个小程序加载更多的模板,可以是点击事件,也可以是下拉到屏幕底部事件,自己设置。
因为是伪数据,所以有点不一样
自己也可以想想怎么实现,
.body{
width: 100%;
min-height: 100vh;
background-color: #4C5268;
}
.center{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 15rpx 0 0 0;
}
.listcss{
width: 80%;
height: 60rpx;
background-color: yellowgreen;
border-radius: 25rpx;
margin: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
<view class='body'>
<view class='center'>
<view class='listcss' wx:for="{{list}}">{{item.name}}</view>
</view>
<button wx:if="{{showlod}}" bindtap='{{islist==true ? "lod":""}}'>加载更多</button>
</view>
// pages/loding/loding.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[],
pages:0,
pagee:2,
page:1,
showlod:true,
islist:true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getlist();
},
/**
* page就是向后传的页面,
* 如果返回的数据为空,那么可以移除事件
*/
getlist:function(e){
let that = this,
pages = that.data.pages,
pagee = that.data.pagee,
page = parseInt(that.data.page),
plist = [],
list = that.data.list;
switch(page){
case 1:
plist = req.p1()
console.log(plist);
break;
case 2:
plist = req.p2()
console.log(plist);
break;
case 3:
plist = req.p3()
console.log(plist);
break;
default:
console.log("没有数据");
wx.showToast({
title: '没有数据',
icon: "none",
duration:1000
})
that.setData({
showlod: false,//用于是否显示
islist:false, //用于移除事件
})
break;
}
for(let i = 0; i < plist.length;i++){
list.push(plist[i]);
}
that.setData({
list:list,
})
},
lod:function(e){
let that = this,
page = that.data.page,
pagee = that.data.pagee;
page++;
that.setData({
page:page
})
that.getlist();
},
getpagelist:function(e){
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
const req = {
p1: function () {
let list = [
{name: "张三",},
{name: "李四",},
{name: "王五"}
]
return list;
},
p2: function () {
let list = [
{name: "欧阳翠花",},
{name: "轩辕建国",},
{name: "诸葛狗蛋"},
]
return list;
},
p3: function () {
let list = [
{name: "赵一鼠",},
{name: "孙二牛",},
{name: "钱三虎"}
]
return list;
},
}
如果是点击事件,就用wx:if="{{showlod}}"
如果是拉至底部事件,就用bindtap='{{islist==true ? "lod":""}}'
逻辑就是这个逻辑,可以整合到自己的项目中。
pages:0,pagee:2,是测试数据,没啥关系。