官方scroll-view

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

官方文档里显示
image.png
image.png

页面示例

  1. <scroll-view class="list-scroll-content" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#fff" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="loadData">
  2. </scroll-view>

方法示例

  1. // 自定义加载数据
  2. loadData(){},
  3. // 自定义下拉刷新控件被下拉
  4. onPulling(e) {
  5.     console.log("onpulling", e);
  6. },
  7. // 自定义下拉刷新被触发
  8. onRefresh() {
  9.     console.log('下拉刷新')
  10.     if (this._freshing) return;
  11.     this._freshing = true;
  12.     setTimeout(() => {
  13.         this.triggered = false;
  14.         this._freshing = false;
  15.     }, 3000)
  16. },
  17. // 自定义下拉刷新被复位
  18. onRestore() {
  19.     console.log("onRestore");
  20.     this.triggered = 'restore'; // 需要重置
  21. },
  22. // 自定义下拉刷新被中止
  23. onAbort() {
  24.     console.log("onAbort");
  25. },

但是这个有时候会有bug，我还是习惯自己写组件

自定义上拉加载

思路

用scroll-view判断用户是否下拉，如果下拉就触发loadData去加载数据，并判断是否还有下一页，如果有就设置当前页码+1，状态码为more，否则为nomore，页码不变。

页面示例

  1. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  2.     <!-- 空白页 -->
  3.     <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
  5.   <!-- 列表 -->
  6.   <view v-for="(item,index) in list" :key="index" class="order-item">
  7.     <uni-load-more :status="tabItem.loadingType"></uni-load-more>
  8.   </view>
  10. </scroll-view>
  1. loadingType: 'more',// 状态码
  2. list: [],
  3. page: {
  4.   current: 1,
  5.   count: null
  6. }

方法示例

  1. //获取列表
  2. async loadData() {
  3.   const _this = this
  4.   if (_this.loadingType === 'nomore') {
  5.     //防止重复加载
  6.     return;
  7.   }
  9.   _this.loadingType = 'loading';
  11.   let list = []
  12.   await this.$api.list({ //接口
  13.       p: _this.page.current
  14.     }).then(res => {
  15.       _this.page.count = res.count
  16.       res.data.forEach(item => {
  17.              _this.list.push(item)
  18.       })
  19.     }).catch(err => {
  20.         _this.$api.msg(err)
  21.     })
  23.   //判断是否还有数据， 有改为 more， 没有改为nomore 
  24.   _this.loadingType = _this.list.length < _this.page.count ? 'more' : 'nomore'
  25.   _this.page.current = _this.list.length < _this.page.count ? _this.page.current + 1 : _this.page.current
  26. }