标签：time apply tno add margin 加载 reg scrollto info
本文接着上一篇内容：
（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); }
最终效果：
实际项目中，数据异步请求，要防止重复请求。这里无法模拟异步请求的场景，就不写了。
数据缺省有两种情况，一种是列表内容为空，另一种是列表上拉加载时没有更多数据。
（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 } }
为了演示没有更多数据的效果，把数据的代码注释掉了。
最终效果如下：
本篇完
标签：time apply tno add margin 加载 reg scrollto info
原文地址：https://www.cnblogs.com/basic0001/p/10330018.html
