微信小程序触底加载数据

2019-07-09  本文已影响0人  阿鲁提尔
Page({
  data: {
    loading: false,
    page: 1,
    pageSize: 10,
    totalCount: -1,
    list: [],
    type: 0,
    filterList: []
},
onLoad(e) {
      this.getList({ page: 1, pageSize: 10, list: [] });  //调用列表
      this.filterList(); //调用头部切换
},
getList(payload = {}) {
      const {
        page = this.data.page,
        pageSize = this.data.pageSize,
        list = this.data.list
      } = payload;
      this.setData({ loading: true });

      api.fetchOrderList({  //数据列表
          page,
          pageSize,
        }).then(res => {
          // console.log(res);
          this.setData({
            page: res.page + 1,
            pageSize: res.pageSize,
            totalCount: res.totalCount,
            list: [...list, ...res.list],
            loading: false
          });
        });
    },
    filterList(){
      api.fetchFilterlist().then(res => {  //头部的切换
        // console.log(res);
        let list = res.list.slice(0,3);
        this.setData({
          filterList:[{type:0,name:"全部"},...list]
        });
      })
    },
    //事件处理函数
    onReachBottom() {
      if (
        !this.data.loading &&
        (this.data.list.length < this.data.totalCount ||
          this.data.totalCount < 0)
      ) {
        this.getList();
      }
    },
    onPullDownRefresh() {
      this.onLoad({ type: this.data.type });
    },
}
上一篇下一篇

猜你喜欢

热点阅读