美文网首页
微信小程序触底加载数据

微信小程序触底加载数据

作者: 阿鲁提尔 | 来源:发表于2019-07-09 13:39 被阅读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 });
        },
    }
    

    相关文章

      网友评论

          本文标题:微信小程序触底加载数据

          本文链接:https://www.haomeiwen.com/subject/hyrxkctx.html