wepy小程序实现列表分页上拉加载

Posted 2021-02-06 basic0001

 

第一篇：wepy小程序实现列表分页上拉加载（1）

 

本文接着上一篇内容：

 

4.优化-添加加载动画

（1）首先写加载动画的结构和样式

打开list.wpy文件

template结构代码：

<template>
  <view class="list-wrapper">
    <!-- 滚动列表 -->
    <scroll-view scroll-y="true" style="height: 400px;" bindscrolltolower="loadMore" class="list">
      <view wx:for="{{list}}" wx:key="index" item="item" class="item">
        {{index + ‘ ‘ + item}}
      </view>
    </scroll-view>
    <!-- 加载动画结构代码 -->
    <view class="loadMoreGif" wx:if="{{loadingShow}}">
      <image src="../images/loadding.gif" />
      <text>正在加载中</text>
    </view>
  </view>
</template>

样式代码：

.loadMoreGif {
  margin: 15rpx auto;
  width: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text {
    font-size: 30rpx;
    color: #999;
    margin-left: 10rpx;
  }
  image {
    width: 30rpx;
    height: 30rpx;
  }
}

loadding.gif

（2）list.wpy js代码 data对象里添加 loadingShow: false

data = {
  // ...
  loadingShow: false
}

加载动画默认是隐藏的。当鼠标滑到列表底部，触发加载数据的时候，让加载动画显示，数据加载完成后让加载动画隐藏。

list.wpy js代码 loadMore方法里面：

loadMore() {
  console.log(‘页数：‘, this.currentPage)
  // 开启加载动画
  this.loadingShow = true
  this.currentPage++
  setTimeout(() => {
    // 模拟数据
    this.listSlice(this.currentPage)
    // 模拟异步时差，3秒后关闭加载动画
    this.loadingShow = false
    // 记得重载dom，否则无效哦
    this.$apply()
  }, 3000);
}

 

最终效果：

实际项目中，数据异步请求，要防止重复请求。这里无法模拟异步请求的场景，就不写了。

5.优化-暂无数据

数据缺省有两种情况，一种是列表内容为空，另一种是列表上拉加载时没有更多数据。

（1）列表为空时的条件渲染

打开list.wpy，template部分代码：

<template>
  <view class="list-wrapper">
    <view wx:if="{{list.length}}">
      <!-- 滚动列表 -->
      <scroll-view scroll-y="true" style="height: 400px;" bindscrolltolower="loadMore" class="list">
        <view wx:for="{{list}}" wx:key="index" item="item" class="item">
          {{index + ‘ ‘ + item}}
        </view>
      </scroll-view>
      <!-- 加载动画结构代码 -->
      <view class="loadMoreGif" wx:if="{{loadingShow}}">
        <image src="../images/loadding.gif" />
        <text>正在加载中</text>
      </view>
    </view>
    <!-- 没有列表数据时的渲染条件 -->
    <view wx:else class="listNone">
      <view><image src="../images/item-empty.png" /></view>
      <text>暂无数据</text>
    </view>
  </view>
</template>

给scroll-view滚动列表和加载动画等内容外面包了一层容器，列表为空时这些都不用显示，走wx:else

css样式代码：

.listNone {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #999;
  image {
    width: 212rpx;
    height: 312rpx;
    margin-bottom: 20rpx;
  }
}

这里为了演示没有数据的效果，我把onLoad()里面的代码都注释掉了

onLoad() {
  // const listChunk = listData.slice(0, 8)
  // if (!listChunk.length) {
  //   this.noDataShow = true
  // } else {
  //   this.list = listChunk
  // }
}

npm run dev 打开微信开发者工具预览：

（2）上拉加载时没有更多数据

list.wpy template部分代码修改：

在scroll-view标签里面追加代码

<view class="nodata" wx:if="{{noDataShow}}">没有更多数据</view>

css代码如下：

.nodata {
  text-align: center;
  color: #999;
  line-height: 48rpx;
  margin: 30rpx 10rpx;
  font-size: 28rpx;
}

 

在js代码 data对象里添加 noDataShow: false

默认不显示，在加载数据后显示

  listSlice (cur) {
    // let start = (cur - 1) * this.pageSize
    // let end = cur * this.pageSize
    // let listChunk = listData.slice(start, end)
    let listChunk = []
    if (!listChunk.length) {
      // 没有数据时显示“没有更多数据”
      this.noDataShow = true
    } else {
      this.list = [...this.list, ...listChunk]
      this.noDataShow = false
    }
  }

为了演示没有更多数据的效果，把数据的代码注释掉了。

最终效果如下：

 

本篇完