微信小程序 下拉刷新 上拉触底加载下一页

使用scroll-view标签

实现下拉刷新  用到的属性

实现上拉加载下一页  用到的属性

 HTML代码:

  <scroll-view id="scrollView" scroll-y="true" style="height:calc(100vh - {{navBarHeight}}px);" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="#fff" refresher-triggered="{{triggered}}" bindrefresherrefresh="onRefresh" bindscrolltolower="loadMore">
    <!--高度自行调整,但是一定要有高度!!!-->
    <!--判断列表是否有数据,有则显示-->
    <!--content盒子里的内容为显示内容-->
    <view class="content" wx:if="{{list.length != 0}}">
      <view class="con" wx:for="{{list}}" wx:key="index">
           <!--写入想循环的数据样式即可-->
      </view>
           <!--底部占个高度,不然最后一条数据紧贴着手机底部-->
      <view style="width: 100%; height: 20rpx;"></view>
    </view>
    <!--判断列表是否有数据,没有有则显示"暂无数据"-->
    <!--zwsj盒子里的内容为暂无数据内容-->
    <view class="zwsj" wx:if="{{list.length == 0}}" style="width: 358rpx;height: 285rpx;margin: 0 auto;">
       <!--写入暂无数据样式-->
    </view>
  </scroll-view>

JavaScript代码:

  data: {
    list:[],  //数据列表
    triggered: false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
    curPage: 1, // 当前页数
    total: "",  // 总条数,用来判断获取完全部数据没有,获取初始数据接口中后端返回的
  },
  // 上拉触底加载下一页
  loadMore() {
    var that = this;
    // 判断当前数据条数是否等于总条数,是则提示没有更多数据了
    if (that.data.list.length == that.data.total) {
      wx.showToast({
        title: '没有更多了',
      })
    } else {
        let tempCurPage = that.data.curPage;
        tempCurPage++;
        that.setData({
          curPage: tempCurPage
        })
    // 请求部分为示例,换成自己接口即可
        $api.getData({
          page: that.data.curPage,//要请求的页数
          limit: 10, //要请求多少条
        }).then((res) => {
          // 将获得的新数据和原来的数据拼接到一起
          let MewList = that.data.list.concat(res.data.data.list);
          that.setData({
            list: MewList,
          })
        })
    }
  },
  // 下拉刷新
  onRefresh() {
    this.setData({
      triggered: true, // 将triggered属性设置为true，表示下拉刷新已经被触发
    })
    // 请求部分为示例,换成自己接口即可
    $api.getData({
      page: 1, //请求第一页
      limit: 10,
    }).then((res) => {
      this.setData({
        //将数据重置为第一页数据
        list: res.data.data.list,
        //当前页数重置为1
        curPage: 1,
        //获取新的总页数
        total: res.data.data.total,
        //刷新完成,状态改回false
        triggered: false,
      })
      wx.showToast({
        title: "刷新成功"
      })
    }).catch(() => {
      wx.showToast({
        title: "刷新失败，请重试"
      })
    })
  },