[咸宁seo公司方便久澳]微信小程序列表下拉刷新上拉加载实例代码

　　本文主要和大分享微信小程序实现列表下拉刷新上拉加载，具有一定的参考价值=◇，[咸宁seo公司方便久澳]感兴趣的小伙伴们可以参考一下▼●，希望能帮助到大家□▲○▼。大庆市小程序开发哪家好29 2020.10 [乌海seo公司甄选久澳]微信小程序中scroll-view实现锚点滑动 本篇文章主要介绍了微信小程序 scroll-view实现锚点滑动的示例，内容挺不错的，哈密市小程序制作公司现在分享给大家， 广州市小程序开发哪家好 也给大家做个参考。 前言 最近开始做小程序，通读一遍文档，

　　DEMO下载

　　效果图

　　原理

　　利用微信小程序的onPullDownRefresh函数（下拉刷新监听函数）和onReachBottom函数（上拉加载监听函数）监听页面的下拉和上拉动态，从而对页面数据进行修改！
 

　　页面配置JSON

•  

  　　enablePullDownRefresh：开启下拉刷新；

  　　

•  

  　　onReachBottomDistance▪▼△：页面上拉触底事件触发时距页面底部距离，单位为px。
   

  　　

{
 "enablePullDownRefresh": true○=,
 "••■;onReachBottomDistance"○▲◆○: 50
}

　　WXML

<◆★;view class="◇▽;tui-content">◇◇△;
 <view class="tui-menu-list" wx:for="●▽;{{dataList}}">Item -- {{item}}<▪◇★-;/view>◇•;
<-★;/view>

　　JS

　　此处用setTimeout模拟请求数据▪•▷；
加载数据限制三次□◁△，调用wx.showToast显示没有更多数据。
 

Page({
 data: {
 dataList: [1,2•=,3,4,5▪•◆☆,6,7▪○●◇,8,9,10☆▼▷▽,11,12,13,14,15,16,17,18,19,20],
 count ▽-•□: 0
 },
 onPullDownRefresh(){
 var self = this;
 setTimeout(() =>○▽; {
 // 模拟请求数据，并渲染
 var arr = self.data▲▷○.dataList, max = Math.max(.☆◇▲▷..arr);
 for (var i = max + 1▷▪; i <= max + 3; ++i) {
 arr.unshift(i);
 }
 self.setData({ dataList: arr });
 // 数据成功后，停止下拉刷新
 wx.stopPullDownRefresh();
 }, 1000);
 },
 onReachBottom(){
 var arr = this•▲▽.data.dataList, max = Math◁☆.max(...arr);
 if (this.data.count < 3) {
 for (var i = max + 1; i <= max + 5; ++i) {
 arr.push(i);
 }
 this.setData({
 dataList: arr•◁,
 count: ++this.data▪◇.count
 });
 } else {
 wx.showToast({
 title: '没有更多数据了！',
 image: '../•□.•☆•./src/images/noData.png'●▼,
 })
 }
 }
})

　　总结

　　必须在每次数据请求完成后，使用wx.stopPullDownRefresh()停止下拉刷新◇…◆◁。

　　相关推荐●○•…：
 

　　微信小程序 列表的上拉加载和下拉刷新的实现

　　以上就是微信小程序列表下拉刷新上拉加载实例代码的详细内容，更多请关注久澳传媒编程栏目其它相关文章！