码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-01-28 15:18:55      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:time   apply   tno   add   margin   加载   reg   scrollto   info   

 

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

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

最终效果如下:

技术分享图片

 

本篇完

 

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

标签:time   apply   tno   add   margin   加载   reg   scrollto   info   

原文地址:https://www.cnblogs.com/basic0001/p/10330018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!