小編給大家分享一下微信小程序列表下拉刷新上拉加載的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、做網(wǎng)站、寧晉網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、寧晉網(wǎng)絡(luò)營銷、寧晉企業(yè)策劃、寧晉品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供寧晉建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.rwnh.cn

效果圖

原理

利用微信小程序的onPullDownRefresh函數(shù)（下拉刷新監(jiān)聽函數(shù)）和onReachBottom函數(shù)（上拉加載監(jiān)聽函數(shù)）監(jiān)聽頁面的下拉和上拉動態(tài)，從而對頁面數(shù)據(jù)進(jìn)行修改！

頁面配置JSON

• enablePullDownRefresh：開啟下拉刷新；

• onReachBottomDistance：頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位為px。

{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}

WXML

<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>

JS

此處用setTimeout模擬請求數(shù)據(jù)；
加載數(shù)據(jù)限制三次，調(diào)用wx.showToast顯示沒有更多數(shù)據(jù)。

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(() => {
  // 模擬請求數(shù)據(jù)，并渲染
  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 });
  // 數(shù)據(jù)成功后，停止下拉刷新
  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: '沒有更多數(shù)據(jù)了！',
  image: '../../src/images/noData.png',
  })
 }
 }
})

以上是“微信小程序列表下拉刷新上拉加載的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：微信小程序列表下拉刷新上拉加載的示例分析
分享URL：http://www.rwnh.cn/article7/gpopij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、ChatGPT、定制開發(fā)、App開發(fā)、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)