小程序上拉加载更多

最近一直忙着项目,都快忘记写博客了,正好弄了一个分页,come on上代码

先看效果

html部分

	<view class="list-content">
      <view class="list-item" bindtap="exchange" wx:for="{{creditList}}" data-item="{{item}}" wx:key="index">
        <image src="{{item.image}}" mode="aspectFit"></image>
        <view class="desc">{{item.name}}</view>
        <view class="use-credit">
          <text>{{item.points}}</text>
          <text>积分</text>
        </view>
      </view>
      <view class="bottom-txt" wx:if="{{totalPage < page}}">
        <view></view>
        <text>已经到底了</text>
        <view></view>
      </view>
    </view>

js
1、首先在data中定义一个page为1
2、在刚进入页面的时候将page:1传给后台
3、在onReachBottom里面进行逻辑处理页数大于1将获得的其他页的数据连 起来,page+1,否则的话进行赋值操作

data: {
    //商品列表和用户积分
    creditList:[],
    userCredit:0,
    totalPage:0,//总页数
    page:1,//默认显示第一页
    userInfo:app.globalData,//用户信息
    tAccessToken:wx.getStorageSync("access_token"),//token请求头
    
  },
getMoreList(page){
    let that = this
    //默认是第一页显示加载
    if(page == 1){
      wx.showLoading({
        title: '加载中',
      })
    }
    wx.request({
      url: '接口地址',
      header:{
        "Authorization": 'Bearer ' + that.data.tAccessToken
      },
      data:{
        current:that.data.page,//当前页
        size:6//每页条数
      },
      success:(res) => {
        let list = res.data.data.records
        //对总页数进行赋值
        this.setData({
          totalPage:res.data.data.pages
        })
        // 页数大于1将获得的其他页的数据连起来,page+1
        if(that.data.page > 1){
          let listArr = that.data.creditList
          that.setData({
            creditList:listArr.concat(list),
            page:page + 1
          })
        } else {
          // 否则的话进行赋值,page+1
          that.setData({
            creditList:list,
            page:page + 1
          })
        }
      },
      fail:(err) => {
        console.log(err)
      },
      complete: (finish) => {
        if(page >= 1){
          setTimeout(() => {
            wx.hideLoading()
          },800)
        }
      }
    })
  },
onReachBottom: function () {
    wx.showLoading({
      title:'加载中'
    })
    this.getMoreList(this.data.page)
    //如果总页数小于当前页显示提示文字
    if(this.data.totalPage < this.data.page){
      wx.showToast({
        title: '到底了',
      })
    }
  }

你可能感兴趣的:(小程序)