微信小程序--下拉流加载

来源：互联网发布：coure crt软件编辑：程序博客网时间：2024/06/05 11:20

本文主要介绍小程序流加载

实现的逻辑,是需要scroll-view监听bindscrolltolower下拉事件触发流加载，向后台发起分页请求page++

1.前端.xml

    //前端页面    <scroll-view scroll-y style="height:100vh;" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">    <view class="page">      <block wx:for="{{list}}" wx:key="">      </block>    </view>    </scroll-view>

tips: view内class=’page’样式需要自行编写，通过数组list循环遍历

2.数据加载js页面

//默认请求1-2个篇文章 data: {    imgHttp: app.globalData.imgHttp,    list: [],    page: 1,  },    lower: function (e) {    var that = this    that.setData({      page: that.data.page + 1  //后台数据需要分页，每次加载一页    })    var page = that.data.page    var pageSize = 2  //改变pageSize的值默认加载每页的数量    wx.request({      url: request_url,      data: {        'page': page,        'pageSize': pageSize,      },      success: function (res) {          if(res.data.code==200){            let List = that.data.list            let list = res.data.content            for (var i = 0; i < list.length; i++) {              List.push(list[i])  //循环遍历添加数组            }            that.setData({              list: List,            })          }          else{            wx.showToast({              title: '没有了哦',              icon:'loading'            })          }        }     })    }

Tips：后端在数据为空的时候需要改变res.data.code的值阻止加载事件或者由前端处理

阅读全文

1 0