Pitfalls encountered by scroll-view! ! When the paged data is loaded, calling the search interface again will call the bottoming event one more time! ! As a result, 5 more pages will be rendered every time the search is re-searched, and there will be two loading pop-up boxes, which makes the user experience poor and incomprehensible
So use the scroll-top event in scroll-view to force the scroll bar to the top
Official document: https://uniapp.dcloud.net.cn/component/scroll-view.html#scroll-view
1. Add scroll-top to the label
<scroll-view scroll-y class="right-box" style="height: 81vh;padding-bottom: 120rpx;"
:scroll-top="scrollRightTop" @scrolltolower="onreachBottom" :refresher-enabled="true"
:refresher-triggered="triggered" :refresher-threshold="45" refresher-background="#f8f8f8"
@refresherrefresh="onRefresh" @refresherrestore="onRestore">
2. Initial value setting (Note: Do not set it to 0, otherwise it will be invalid)
data() {
return {
scrollRightTop: 0.01,//初始设置0.1或者0.01(坑!!设置0根本不好使没用)
}
},
3. Pit! ! : The bottom is called twice when paging. Therefore: every time the page is forced to be rendered, the scroll bar is forced to return to the top
searchBtn() {
this.scrollRightTop=0.01 //可以在每次搜索的时候先初始一下
this.scrollRightTop = 0.01+0.01//然后每次加0.01 别问为啥要加0.01 反正直接给0就是没效果 无解 也可能是本人代码有误 但是亲测有效
}