wepy小程序實現列表分頁上拉加載（2）

 

第一篇：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
    }
  }

為了演示沒有更多數據的效果，把數據的代碼注釋掉了。

最終效果如下：

 

本篇完