小程序自定義下拉刷新組件(為應對頭部有非滾動區的情況)

文心雕刺

效果動圖:

image

小程序是有其下拉刷新api的,然而頭部或者尾部有非滾動區域的情況下,是應對不了的,相關問題在微信開放社區已經是老生常談了,比如:

onPullDownRefresh 下拉刷新在安卓手機上會帶動頭部fixed元素一起下拉的問題

又比如:

小程序下拉刷新onPullDownRefresh 問題,fixed定位下移!

像這種問題有很多,不一一列舉了。

這個問題從2018年開始就不斷有開發者向微信開放社區反饋,一直到現在,都沒有解決,沒辦法,本公司項目中有頭部是固定非滾動的列表頁面,只得自己自定義一個。

列表頁的上拉加載,參考了這篇文章中的方法,鏈接放在這里,大家可以移步去看一下:

淺談微信小程序中的下拉刷新和上拉加載

回到主題,下拉刷新,我的思路是在這篇文章里找到的:

小程序開發踩坑記錄(五)——模擬實現底部tabbar和下拉刷新功能(解決安卓端打開下拉刷新功能后fixed元素失效問題)

我一上來打算用該文章中的方法,來自制下拉刷新,可是我是在自定義組件中使用,不是在page中定義,在自定義組件中scroll-view的onscroll事件怎么也響應不了,也就無法獲得當前頁面的scrollTop。

后來我受這個啟發,既然可以在tocuh事件中改變scroll-view的scrollTop,來模擬出一個下拉刷新區域的scrollTop隨手指滑動而變化,進而實現其下拉顯示和回彈,那我也可以使用絕對定位和相對定位,依靠改變容器的top值來實現這個功能,也就是可以將滾動容器的top初始值設置為負的刷新區域的高度,在tocuhstart和tocuhmove事件中獲取手指在屏幕上的滑動距離,讓容器的top和滑動距離呈正相關,當top值達到自己設置的閾值的時候停止變化,隨后在tocuhend事件中發起刷新請求。

image

大體思路如上圖所示

下面貼一下基本代碼:


<view
  class="scroll"
  scroll-y
  style="min-height: {{pageHeight + 'px'}}; top: {{marginTop + 'rpx'}}"
  enable-back-to-top="{{true}}"
  bindtouchmove="movePull" 
  bindtouchstart="startPull" 
  bindtouchend="endPull" >
  <view class="scroll__content {{springbacking ? 'return__content' : ''}}" style="min-height: {{contentHeight + 'px'}};top: {{scrollTop + 'px'}}">
    <view class="refresh__wrap">
      <view class="refresh__center">
        <view class="refresh__icon {{refreshText === '松開刷新' ? 'rotate' : ''}}" >
          <mp-icon icon="sending" color="#999" size="{{35}}"></mp-icon>
        </view>
        <view class="tips">{{refreshText}}</view>
        <view class="times">最后更新:{{refreshTime}}</view>
      </view>
    </view>
    <slot />
    <view class="footer__line" wx:if="{{recycleList.length}}">
      <view class="scroll__loading" wx:if="{{bottomLoadingShow}}"></view>
      <text class="text {{bottomLoadingShow ? 'notline' : ''}}">{{lineText}}</text>
    </view>
  </view>
  <no-data 
    show="{{notDataShow}}"
    bind:refresh="refresh" />
</view>

重點說下,這個組件結構為外層.scroll元素,最小高度設置為pageHeight(計算方法后面會貼),position為relative,其top值設置為父級頁面傳入的marginTop值,就是父級頁面頭部非滾動元素的rpx高度,如果沒有非滾動元素,則默認為0,這樣的話,外層的位置就可以依賴marginTop值來確定了,滾動的時候不會把非滾動區域也算進去;
內層列表滾動區域.scroll__content元素,position為absolute最小高度contentHeight,top值scrollTop,初始-80px(刷新文案元素高度),這樣就把.refresh__wrap刷新文案元素隱藏起來了。此外,設置一個默認插槽,就是列表循環內容。

pageHeight和contentHeight計算方法,用到wx.getSystemInfozhege api,比較簡單:

getPageHeight() {
      const self = this;
      wx.getSystemInfo({
        success: (res) => {
          self.setData({
            pageHeight: res.windowHeight - (self.data.marginTop / 750 * res.windowWidth),
            contentHeight: (res.windowHeight - (self.data.marginTop / 750 * res.windowWidth)) + REFRESHHEIGHT + 2,
          })
        }
      })
    }

以上,marginTop是父級組件傳進來的頭部非滾動區域的rpx高度值(頭部非滾動區域position設置為fixed),默認為0,REFRESHHEIGHT是80,就是刷新文案區域的高度px值,最后加2是保證在第一頁鋪不滿整屏的情況下,能讓onReachBottom上拉事件生效,上拉加載本文不多說了,可以直接去看上面貼出的鏈接:“淺談微信小程序中的下拉刷新和上拉加載”(注意,我這里是自定義組件,onReachBottom事件同樣要在父頁面中寫onReachBottom生命周期,來調用自定義組件中的onReachBottom方法)。

tocuhstart方法,就是獲取手指開始接觸屏幕的clentY值:

startPull(ev) {
  this.setData({ springbacking: false }); // 開始下拉的時候,去除.scroll的transition為0.4s的動畫延遲效果,使其完全遵循手指的驅動
  this.lastTop = ev.changedTouches[0].clientY;
},

tocuhmove方法:

// MAX_MOVE_TOP 為 120 允許最大滑動距離
// MAX_SCROLL_TOP 為 20 允許.scroll__content的最大top值
movePull(ev) {
      this.nowY = ev.changedTouches[0].clientY;// 手指當前觸摸位置的clentY值
      this.nowY = this.nowY - this.lastTop;// 滑動距離
      const query = wx.createSelectorQuery();
      query.select('.scroll').boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((rect) => { // 必須是滾動高度為0即在頂部的時候觸發
        if (rect[1].scrollTop <= 0 && this.nowY > 0 && this.nowY <= MAX_MOVE_TOP && this.data.recycleList.length) {
          this.setData({// 滿足以上條件的,則使.scroll__content元素的top值等于-80px 加上滑動距離 nowY
            scrollTop: -REFRESHHEIGHT + this.nowY,
          })
          if(this.nowY >= 100) {
            this.setData({
              refreshText: '松開刷新',
            })
          }
        }
      })

      if(this.nowY > MAX_MOVE_TOP && this.data.scrollTop < MAX_SCROLL_TOP && this.data.recycleList.length) {
        this.setData({// 此處判斷是為了解決手指滑動過快,tocuhmove得到的clentY值呈非線性變化,導致滑動距離可能上一次還是100以內,下一次直接就到300開外,無法滿足上面的top變化條件,就卡住了。所以此時手動將.scroll__content的top值設置為20。
          refreshText: '松開刷新',
          scrollTop: MAX_SCROLL_TOP,
        })
      }
      ...
      // 上拉加載邏輯
      ...
    }

以上,下拉刷新都是在進入頁面有數據的情況下才會觸發即this.data.recycleList.length這個條件,無數據的情況下則顯示no-data組件,如下圖所示,直接點擊刷新按鈕刷新即可。
image

tocuhend事件:

endPull() {// 結束滑動的時候當.scroll__content的top值大于等于20,則可以執行刷新方法。
      if(this.data.scrollTop >= MAX_SCROLL_TOP) {
        wx.showNavigationBarLoading();
        this.refresh();
      }
      ...
      // 上拉加載邏輯
      ...
      if (this.data.scrollTop > -REFRESHHEIGHT) {
        setTimeout(() => { // 定時器是防止因為手指離開屏幕過快(類似點擊事件,但又下拉了一段距離),導致的數據更新,視圖未更新,而卡住的情況。
          this.setData({ // 這個springbacking為true的時候,.scroll__content元素的transition就是0.4s,回彈時候的動畫效果。
            springbacking: true,
            scrollTop: -REFRESHHEIGHT
          })
        }, 50)
      }
    },

好了,下拉刷新的邏輯就寫完了,該下拉刷新在安卓和ios上的效果差別不是很大,由于業務需要,我是把他做成了一個組件,一些刷新方法和父頁面的請求事件成功交互,失敗交互,不在本文探討范圍之內,所以就略去了,想試試的朋友可以直接在頁面中將slot插槽替換成列表循環元素嘗試。

閱讀 1.4k
120 聲望
3 粉絲
0 條評論
120 聲望
3 粉絲
宣傳欄
一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>