wepy小程序实现列表分页上拉加载(2)
本文接着上一篇内容:
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)的更多相关文章
- wepy小程序实现列表分页上拉加载(1)
使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- Flutter 流式布局列表实例+上拉加载
页面变化的几种方式: 一.StatefulWidget的setState形式 先声明两个变量. ; List<Map> list = []; 写了一个方法,获取数据: void _getH ...
- RecyclerViewLoadMoreDemo【封装上拉加载功能的RecyclerView,搭配SwipeRefreshLayout实现下拉刷新】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装含有上拉加载功能的RecyclerView,然后搭配SwipeRefreshLayout实现下拉刷新.上拉加载功能. 在项目中将 ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
随机推荐
- Unix/Linux环境C编程新手教程(37) shell经常使用命令演练
cat命令 cat命令能够用来查看文件内容. cat [參数] 文件名称. grep-指定文件里搜索指定字符内容. Linux的文件夹或文件. -path '字串' 查找路径名匹配所给字串的全部 ...
- 61.node.js开发错误——Error: Connection strategy not found
转自:https://blog.csdn.net/fd214333890/article/details/53457145
- 【hihocoder 1122】二分图二•二分图最大匹配之匈牙利算法
[Link]:https://hihocoder.com/problemset/problem/1122 [Description] [Solution] 二分图匹配,匈牙利算法模板题; 这里我先把染 ...
- BZOJ 1696 [Usaco2007 Feb]Building A New Barn新牛舍 数学
题意:链接 方法:数学+模拟 解析: 首先这类问题不是第一次见了,所以直接知道拿x的中位数.y的中位数. 这题就是讨论情况很的烦. 题中有个限制,给出待求和的点不能选取. 所以假设奇数个点,求出x中位 ...
- 点击事件-click,longclick
今天在修改一个问题的时候,遇到了click,longclick事件触发情况.记录下来. 代码 tView.setOnLongClickListener(new OnLongClickListener( ...
- activity-启动动画的设定(下面弹出出现,弹入下面消失)
1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...
- Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64编码可用于在HTTP环境下传递较长的标识信息.例如 ...
- SGU 253 Theodore Roosevelt 快速判断点是否在凸包内
http://acm.sgu.ru/problem.php?contest=0&problem=253 题意简单易懂...给你n个点的凸包(经测试已经是极角序)...判断m个点是否在凸包内.. ...
- vim学习3
可视模式:
- Scala中的“=>”和“<-”
“=>”符号大概可以看做是创建函数实例的语法糖,例如 args.foreach(arg => println(arg)) 大概可以看做 args.foreach(Function(arg) ...