微信小程序上拉加载

自己写demo,做一个微信小程序不通过后端传输数据本地循环数据上拉加载的效果。

 效果是这样的，代码：

wxml:

    
        {{item.id}} -- {{item.names}}
    

 wxss:

.contain{
    width: 100%;
}
.listCont{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
}
.li{
    width: 100%;
    height: 150rpx;
    line-height: 150rpx;
}

 js:

js里面需要循环数组对象。首先声明一个对象 obj={},然后给对象添加属性id和names，再然后把obj赋值给newList[i],这都在for循环里进行。

在onLoad里面因为是初次加载只有10条，i<10就可以了。

然后在onReachBottom:function(){}这个上拉触底中要写page ，一般是一页10条数据。let sum为总的数据条数， 做判断，page<=sum/10基本执行onload里的逻辑，具体看下面代码展示，page>sum/10，sum加载完毕，提示没有数据了（如果不做判断，不做提示，则往下拉会一直有数据加载）。

data: {
        page:1,
        arrayList:[]
    },

onLoad: function (options) {
        let that = this;
        let newList = [];
        console.log(newList);
        for(let i=0; i<10; i++){
            let obj=new Object();
            obj.id=i;
            obj.names = "ISO0100"+i;
            newList[i] = obj
        }
        console.log(newList);
        that.setData({
            arrayList:newList
        })
        
    },
/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        console.log('上拉触底事件触发');
        let that = this;
        let page = that.data.page+1;
        let newList = [];
        console.log(page);
        let sum = 100;
        if(page<=sum/10){
            for(let j=0; j<=sum/10*page; j++){
                let obj=new Object();
                obj.id=j;
                if(j<10){
                    obj.names = "ISO0100"+j;
                }else if(j>=10&&j<100){
                    obj.names = "ISO010"+j;
                }else if(j>=100){
                    obj.names = "ISO01"+j;
                }
                newList[j] = obj
            }
            console.log(newList);
            that.setData({
                arrayList:newList,
                page:page
            })
        }else{
            wx.showToast({
              title: '没有更多数据了',
              icon:"none"
            })
        }
    },