The use of scroll-view to return to the top (scroll-top)

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就是没效果 无解  也可能是本人代码有误  但是亲测有效
}

Guess you like

Origin blog.csdn.net/weixin_69666355/article/details/129794179