這篇文章主要介紹微信小程序列表下拉刷新及上拉加載怎么實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

鐵力網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法

微信小程序?yàn)?017年1月9日打下了一個(gè)特殊的標(biāo)簽，迅速刷爆了網(wǎng)絡(luò)和朋友圈，最近我也寫了一個(gè)demo程序體驗(yàn)一把。微信小程序和vuejs有些像，都是數(shù)據(jù)驅(qū)動(dòng)視圖&單向數(shù)據(jù)綁定，而其體驗(yàn)要比H5頁(yè)面好很多，這得益于微信環(huán)境的支持以及首次運(yùn)行時(shí)同時(shí)加載所有頁(yè)面的處理。本文將分享微信小程序列表的下拉刷新和上劃加載的實(shí)踐。

效果圖

首先來(lái)看看程序效果圖，以下四張圖從左至右依次是：下來(lái)刷新動(dòng)畫、下拉刷新結(jié)果、上劃加載動(dòng)畫以及上劃加載結(jié)果，程序中的數(shù)據(jù)均為模擬數(shù)據(jù)，不包含網(wǎng)絡(luò)請(qǐng)求，所以可以直接運(yùn)行。

方法一：用scroll-view組件實(shí)現(xiàn)

由于最后沒有選擇這種實(shí)現(xiàn)方法（下拉刷新有bug），因此只做簡(jiǎn)單介紹，當(dāng)然如果沒有下拉刷新的需求，scroll-view組件實(shí)現(xiàn)列表的渲染很方便，從官方文檔可以看到，scroll-view組件集成了以下方法為編程提供很大便捷。

scroll-into-view String 值應(yīng)為某子元素id，則滾動(dòng)到該元素，元素頂部對(duì)齊滾動(dòng)區(qū)域頂部
bindscrolltoupper EventHandle 滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件
bindscrolltolower EventHandle 滾動(dòng)到底部/右邊，會(huì)觸發(fā) scrolltolower 事件
bindscroll EventHandle 滾動(dòng)時(shí)觸發(fā) event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

方法二：用page頁(yè)面自帶的功能

Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

1、在app.json頁(yè)設(shè)置窗口前景色為dark & 允許下拉

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

2、在list.json頁(yè)設(shè)置允許下拉

{
  "enablePullDownRefresh": true
}

3、利用onPullDownRefresh監(jiān)聽用戶下拉動(dòng)作

注：在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁(yè)面回彈，所以在 scroll-view 中滾動(dòng)無(wú)法觸發(fā)onPullDownRefresh，因此在使用 scroll-view 組件時(shí)無(wú)法利用page的該特性。

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載
 let newwords = [{message: '從天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加載
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4、利用onReachBottom頁(yè)面上拉觸底事件

注：,首次進(jìn)入頁(yè)面，如果頁(yè)面不滿一屏?xí)r會(huì)觸發(fā) onReachBottom ，應(yīng)為只有用戶主動(dòng)上拉才觸發(fā)；手指上拉，會(huì)觸發(fā)多次 onReachBottom，應(yīng)為一次上拉，只觸發(fā)一次；所以在編程時(shí)需要將這兩點(diǎn)考慮在內(nèi)。

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土長(zhǎng)',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

5、上劃加載圖標(biāo)動(dòng)畫

/**
 * 旋轉(zhuǎn)刷新圖標(biāo)
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋轉(zhuǎn)開始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z軸旋轉(zhuǎn)一個(gè)deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

最后附上布局代碼：

  
    
       {{item.message}}
       {{item.time}}
    
    {{item.greeting}}
  


 

以上是“微信小程序列表下拉刷新及上拉加載怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！