小程序加载更多

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

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_38026437/article/details/83864219