小程序加载更多

迈不过友情╰ 2022-04-18 04:47 284阅读 0赞

写了一个小程序加载更多的模板，可以是点击事件，也可以是下拉到屏幕底部事件，自己设置。

因为是伪数据，所以有点不一样

自己也可以想想怎么实现，

.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;
    }

// 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,是测试数据，没啥关系。