微信小程序 滚动到底部加载新的数据 之后滚动到顶部

1.配置到底部监听

在app.json的window里面加入

里面的300表示距离底部300rpx触发onReachBottom事件 默认50rpx

 "window": {
    "onReachBottomDistance": 300
  },

2.在数据列表的js页面

  /**
   * 页面上拉触底事件的处理函数
   */
   onReachBottom() {
    console.log("到底部了");
    // 把字符串转为数字进行加减
    let page = parseInt(this.data.page)
    let last_page = parseInt(this.data.last_page);
    // 判断是否是最后一页 last_page 是后端返回的当前数据有多少页
    if (page < last_page) {
     // 当前数据到底部就把page+1传入获取第二页数据合并
      page = parseInt(page + 1);
      // console.log(page);
      this.setData({
        page: page,
      });
      this.order_list(this.data.page);
    } else {
      wx.showToast({
        title: "没有更多数据了",
        icon: "none",
        duration:3000,
      })
    }
  },

// 请求数据方法
getClue(page) {
    getClueApi({
      page
    }).then((res) => {
        // 请求返回的数据
      console.log(res.data);
       // 把请求到的数据与前一次的数据合并，第一次的时候定义的列表要为空[]
       let list = []
        // 判断当前是否为第一页，在还有其他筛选条件的情况下，其他筛选条件更新时，传入的this.data.page为1 就会覆盖整个list数据
      if (page != 1) {
        list = [...this.data.list, ...res.data.list.data]
      } else {
       // 传入1就初始化为1
        this.setData({
          page:page
        })
        // 滚动到顶部
        wx.pageScrollTo({
          scrollTop: 0
      })
        list = res.data.list.data
      }
      this.setData({
        list: list,
        cluestatus: res.data.status,
        last_page: res.data.list.last_page
      })
    })
  },
// 其他筛选触发的事件
 input() {
    if (this.data.seek != "") {
        // 这里传入的page为1 所以会重新覆盖list数据
      this.getClue(1, this.data.seek)
    } else {
      Toast({
        position: "top",
        message: '请输入搜索词!'
      });
    }
  },