微信小程序分页加载列表：

项目开发时很多页面都需要用到分页加载列表，为了方便，自己封装了分页加载列表组件，下拉刷新列表，滑动至底部，加载更多

组件界面：

可以扫码查看是否符合自己的需求

wxml：

<!--components/loadList/index.wxml-->
<scroll-view scroll-y="true" refresher-enabled refresher-triggered="{{ isRefreshering }}" style="height: 100%;"  bindrefresherrefresh="handleRefresh" bindscrolltolower="handleTolower"><view class="scroll-body"><view class="scroll-list"><slot></slot></view><view wx:if="{{ isLoading }}" class="scroll-more"><image src="../../static/images/loading.gif" mode="widthFix" class="icon-loading"></image></view><view wx:if="{{ isLastPage }}" class="scroll-bottom-line">-------我也是有底线的~-------</view></view>
</scroll-view>

js：

// components/loadList/index.js
Component({/*** 组件的属性列表*/properties: {// 是否正在加载isLoading: {type: Boolean,value: false},// 是否正在刷新isRefreshering: {type: Boolean,value: true},// 是否最后一页isLastPage: {type: Boolean,value: false},},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {// 滚动到顶部handleRefresh() {console.log('refresh');this.triggerEvent('refresh')},// 滚动到底部handleTolower() {this.triggerEvent('loadMore')},}
})

wxss：

/* components/loadList/index.wxss */
.scroll-body{position: relative;padding-bottom: 120rpx;min-height: 100%;/* box-sizing: border-box; */
}
.scroll-bottom-line{position: absolute;bottom: 0;left: 0;right: 0;padding: 20rpx 0;text-align: center;color: #999999;font-size: 28rpx;
}
.icon-loading{display: block;margin: 20rpx auto;width: 50rpx;height: 50rpx;
}

使用：

json文件

 "usingComponents": {"load-list": "../../components/loadList"}

wxml文件

<!--pages/useLoadList/index.wxml-->
<view class="container list-container"><load-list isRefreshering="{{ isRefreshering }}" isLoading="{{isLoading}}" isLastPage="{{isLastPage}}" bindrefresh="handleRefresh" bindloadMore="handleLoadMore"><view class="list-module"><view wx:for="{{ list }}" wx:key="index" class="list-item">{{ index }}项目</view></view></load-list>
</view>

js 文件中

 // pages/useLoadList/index.jsdata: {isRefreshering: false,isLoading: false,isLastPage: false,page: 1,pageSize: 9,list: []},// 获取数据getList() {for (let index = 0; index < this.data.pageSize; index++) {if (this.data.list.length >= 35) {break} else {this.data.list.push(index + 1)}}setTimeout(() => {this.setData({list: this.data.list,isRefreshering: false,isLoading: false,isLastPage: this.data.list.length >= 35})}, 1000)},// 加载更多handleLoadMore() {if (!this.data.isLastPage) {this.setData({page: this.data.page + 1,isLoading: true}, () => {this.getList()})}},// 刷新handleRefresh() {this.setData({isLastPage: false,page: 1,list: []}, () => {this.getList()})}

微信小程序分页加载列表相关推荐

微信小程序数据拼接_最佳方式实现微信小程序分页加载数据
一般小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面.这样的确可以实现分页加载数 ...
微信小程序php分页加载,微信小程序分页加载
分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序 ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
微信小程序自动解决分包大小问题_微信小程序分包加载设置
设置分包加载微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理整个小程序压缩后代码 ...

微信小程序分页加载列表

微信小程序分页加载列表：

组件界面：

wxml：

js：

wxss：

使用：

微信小程序分页加载列表相关推荐

最新文章

热门文章