uniapp使用 scroll-view 进行触底加载列表

F2601775592

已于 2023-12-05 11:44:15 修改

阅读量1.5k

点赞数 23

CC 4.0 BY-SA版权

文章标签： uni-app

于 2023-12-05 11:37:06 首次发布

本文链接：https://blog.youkuaiyun.com/F2601775592/article/details/134803116

本文介绍了如何在uni-app应用中使用scroll-view组件进行区域滚动，并实现列表的动态加载功能。当滚动到底部时，会触发loadMore函数判断是否需要加载更多数据，通过接口获取并更新列表内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可滚动视图区域。用于区域滚动。

具体使用可以参考 scroll-view | uni-app官网

1.template部分

<scroll-view scroll-y="true" class="scrollbox" :scroll-top="scrollTop" @scrolltolower="loadMore">
      // 这里没有数据时 我是用了一个封装的组件
      <empty-tips class="noData" v-if='list&&list.length==0' :tips-list="['暂无数据']" />
      // 这里是列表
      <view class="item" v-else>
          <view v-for="(item,index) in list"  :key="index">
      </view>
   </view>
</scroll-view>

2.script部分

    loadMore() {
        console.log('触底了')
        // 判断需不需要加载列表
        if(this.current*this.size<this.total){
          this.current++;
          this.commanderInfo(false);
        } else {
          console.log('没有最新啦')
        }
      },
    commanderInfo(isInit=true) {
        if (isInit) {this.current = 1}
        wx.showLoading();
        http.request({
          url: '这里是接口地址',
          method: 'get',
          data: {
            size: this.size,
            current: this.current,
          },
          callBack: (res) => {
            this.total = res.total
            if (this.current == 1)
              this.list= [];
            wx.hideLoading();
            this.rescord = res
            const list = res.records
            this.list= this.list.concat(list)
          }
        })
      }

3.css部分

这列需要设置高度，一开始我没有设置高度触底没有作用

.scrollbox {
	height: calc(100vh - 600rpx);
	overflow: auto;
}