一、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