小編給大家分享一下微信小程序列表下拉刷新上拉加載的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站建設(shè)、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向,結(jié)合用戶體驗(yàn)與視覺傳達(dá),提供有針對(duì)性的項(xiàng)目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場(chǎng),引領(lǐng)市場(chǎng)!效果圖
原理
利用微信小程序的onPullDownRefresh函數(shù)(下拉刷新監(jiān)聽函數(shù))和onReachBottom函數(shù)(上拉加載監(jiān)聽函數(shù))監(jiān)聽頁面的下拉和上拉動(dòng)態(tài),從而對(duì)頁面數(shù)據(jù)進(jìn)行修改!
頁面配置JSON
enablePullDownRefresh:開啟下拉刷新;
onReachBottomDistance:頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位為px。
{ "enablePullDownRefresh": true, "onReachBottomDistance": 50 }
WXML
<view class="tui-content"> <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view> </view>
JS
此處用setTimeout模擬請(qǐng)求數(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(() => { // 模擬請(qǐng)求數(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)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:微信小程序列表下拉刷新上拉加載的示例分析-創(chuàng)新互聯(lián)
本文地址:http://bm7419.com/article26/ijocg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、Google、用戶體驗(yàn)、商城網(wǎng)站、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容