uniapp 中 ScrollView 組件上拉分頁怎么不滾動到最頂部
實現類似微信聊天頁面,上拉加載更多歷史聊天記錄,每次上拉到頂部,界面自動會滾動到最頂部,我希望ScrollView不要滾動到最頂部,每次就停留在當前位置
1,綁定scroll-view中scroll-into-view屬性
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>
2,將scroll-view中包裹元素設置flex樣式
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"> <view id="scroll-view-content" > <view class="item" v-for="item in list">{{item.name}}</view> </view> </scroll-view>
css代碼:
#scroll-view-content { display: flex; flex-direction: column-reverse; }
3,綁定數據list,獲得的數據為data,以下為實現代碼
loadHistory: function () { if (data.length) { let start = this.list.length for (let i = start; i < start + data.length; i++) { const item = data[i - start] // 拿到data遍歷的item this.list.push(item) } this.scrollViewIntoView = "view" + this.msgList[start - 1].id // 設置當前滾動到的元素(加載前最后一個元素) }