uniapp scroll-view - 自定義下拉刷新-聊天記錄分頁

一、scroll-view 下拉刷新

scroll-view用的頁面中不能設(shè)置"enablePullDownRefresh": true,onPullDownRefresh()方法也會失效。
可以設(shè)置scroll-view的自定義刷新事件:
scroll-view標(biāo)簽添加:

<scroll-view class="scroll" id="scrollview" scroll-y="true" 
:scroll-into-view="scroll_id" refresher-enabled :refresher-triggered="triggered" 
@refresherrefresh="scrollRefresh" @refresherrestore="onRestore">

<view :id="'scroll_'+index" class="item-view uni-column" v-for="(item,index) in list" :key="index">

data中定義:

refreshing: false,
triggered: true,

下拉刷新觸發(fā)方法:

//自定義下拉刷新被觸發(fā)
scrollRefresh() {
    if (this.refreshing) return;
    this.refreshing = true
     if(!this.triggered){
        this.triggered = true
      }
      //下拉刷新邏輯
      this.page += 1
      ....
     //結(jié)束下拉刷新狀態(tài)
     setTimeout(() => {
          this.triggered = false;
          this._freshing = false;
     }, 3000)
 }
 //自定義下拉刷新被復(fù)位
onRestore() {
    this.triggered = "restore" //需要重置,設(shè)置為true app上又會執(zhí)行刷新
},

二、scroll-view滾動到某一item

之前用的 :scroll-top="scrollTop" 在微信小程序上互動不連貫 ,后來滾動采用的scroll-into-view,在scroll-view中加 :scroll-into-view="scroll_id" ,然后scroll-view中的list的item布局,每個都有一個id,然后改變這個scroll_id,他就會滾動到對應(yīng)id的view上去,這種滾法不用考慮每個item的高度怎樣,因為他是直接滾動到那個item view上去的。
這里拿分頁查看聊天記錄舉例:
每個聊天item設(shè)置一個id,必須以字母開頭,scroll_1,scroll_2....,需要滾動到底部,就改變scroll_id為最后一條記錄的id。如果有分頁,比如在頂部下拉加載第二頁,每頁加載10條數(shù)據(jù),就改變scroll_id為第10條的id,不管是加載第幾頁,第10條都是兩頁銜接的地方,因為每次添加都是添加在list前面部分的。

<view :id="'scroll_'+index" class="item-view uni-column" v-for="(item,index) in list" :key="index">

1、滾動到底部

this.scroll_id = "scroll_" + (this.list.length - 1)

2、聊天記錄頂部下拉分頁加載,滾動到兩頁銜接處

this.scroll_id = "scroll_" + (this.page_size - 1)

上面會有一個問題,就是加載第二頁的時候滾動正常,加載第三頁以上都不滾動了,經(jīng)測試發(fā)現(xiàn),是scroll_id一直沒變,后面就不滾動了,但是我的前10條數(shù)據(jù)都是改變了的呀。網(wǎng)上說這個方法是scrollview高度超過一屏就失效什么的,我測試是因為scroll_id一直不變,所以后面失效。這個時候可以用下面的方法滾動下:
a:例如每次加載10條,每次分頁的時候按照10、9、10、9的滾,防止scroll_id不變,這樣就是每次會有一條信息的位置誤差。

if (this.page % 2 == 0) {
    this.scroll_id = "scroll_" + (this.page_size - 1)
} else {
    this.scroll_id = "scroll_" + (this.page_size - 2)
}

b:讓每個item有自己的id,每個id互不相同,上面是用的scroll_ + index 拼接出來的id,每次滾動的都是scroll_9,第三頁就會失效,如果每個item有自己唯一的id, 每次都滾動到第10條的id就行了。

this.scroll_id = this.list[9].id
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容