微信小程序滚动到底部加载新的数据之后滚动到顶部-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序滚动到底部加载新的数据之后滚动到顶部。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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: '请输入搜索词!'
      });
    }
  },

小程序监听滚动到底部,微信小程序,小程序