uni-app实现上拉加载

 

参考文档代码：

<template>
  <view>
    <!-- 省略其他内容 -->
    <view v-for="item in dataList" :key="item.id">{{ item.title }}</view>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        dataList: [], // 存储数据列表
        pageNum: 1, // 当前页数
      }
    },
    onReachBottom () {
      this.requestNextPageData()
    },
    methods: {
      async requestNextPageData () {
        const res = await uni.request({
          url: 'your-api-url',
          data: {
            pageNum: this.pageNum,
          },
        })
        if (res.statusCode === 200) {
          const nextDataList = res.data // 假设接口返回数据格式为 { data: [...] }
          if (nextDataList.length > 0) {
            this.dataList = this.dataList.concat(nextDataList)
            this.pageNum++
          } else {
            uni.showToast({
              title: '没有更多了',
              icon: 'none',
            })
          }
        } else {
          uni.showToast({
            title: '请求失败，请重试',
            icon: 'none',
          })
        }
      },
    },
  }
</script>

 

 

 

自己的代码：

//上拉加载
        onReachBottom() {
            if (!this.pullUpOn) {
                return;
            }

            //this.loadPosts(false);
        },

// 点击栏目切换当前页时改变样式
            swichNav(e) {
                let cur = e.currentTarget.dataset.current;

                if (this.currentTab == cur) {
                    return false;
                }

                this.currentTab = cur;
                // this.posts = [];
                this.loadPosts(true);
            },

//根据id获取某个分类下文章
            loadPosts(refresh) {
                this.loadding = true;
                Rest.get(Api.JIANGQIE_POSTS_CATEGORY+'&catid='+this.tabbar[this.currentTab]['id']+'&pagesize=50&more=1', {
                    //'offset': refresh ? 0 : this.posts.length,
                    //'sort': this.sorts[this.currentTab]
                }).then(res => {                    
                    this.loaded = true;
                    this.loadding = false;
                    this.posts = (refresh ? res.data : this.posts.concat(res.data));
                    //this.pullUpOn = (res.data.length >= Constants.JQ_PER_PAGE_COUNT);
                    //this.pageNum++;
                    console.log('栏目id',this.tabbar[this.currentTab]['id']);
                    console.log('栏目id文章',res.data);
                });
            }

<!-- 顶部栏目 -->
        <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="0">
            <view v-for="(item, index) in tabbar" :key="index" class="tab-bar-item"
                :class="(currentTab==index ? 'active' : '')" :data-current="index"
                @tap.stop="swichNav">
                <text class="tab-bar-title">{{item.name}}</text>
            </view>
        </scroll-view>