uni-app 滚动条无法回到顶部解决办法

最新推荐文章于 2025-04-28 13:30:55 发布

原创最新推荐文章于 2025-04-28 13:30:55 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

当在uni-app中使用click事件设置scroll-top=0无法使滚动条回到顶部时，可以通过监听@scroll事件并结合old.scrollTop实现。在getActive方法中，先将scrollTop设为old.scrollTop，然后在$nextTick中将scrollTop设为0。同时添加@scroll=scrollChange监听滚动，保存每次滚动的位置，以便后续使用。

问题：在click事件中设置了scroll-top = 0后，uni-app 滚动条还是无法回到顶部.

<view :class="active == index? 'active' : ''"  @click="getActive(index)" v-for="(item,index) in categories" :key="item.cat_id">{{ item.cat_name }}</view>
<scroll-view class="right" scroll-y :scroll-top="scrollTop" >
			<view class="data" v-for="(list,index) in rightData" :key="list.cat_id">
				<image @click="showImage(list.cat_icon)" :src="list.cat_icon"></image>
				<view>{{ list.cat_name}}</view>
			</view>
			<view class="none" v-if="show">暂无数据</view>
</scroll-view>

解决办法：

添加 @scroll="scrollChange"

<view :class="active == index? 'active' : ''"  @click="getActive(index)" v-for="(item,index) in categories" :key="item.cat_id">{{ item.cat_name }}</view>
		<scroll-view class="right" scroll-y :scroll-top="scrollTop" @scroll="scrollChange">
			<view class="data" v-for="(list,index) in rightData" :key="list.cat_id">
				<image @click="showImage(list.cat_icon)" :src="list.cat_icon"></image>
				<view>{{ list.cat_name}}</view>
			</view>
			<view class="none" v-if="show">暂无数据</view>
</scroll-view>

		data() {
			return {
				categories: [],
				active: 0,
				rightData: [],
				index: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},

getActive(index) {
	this.scrollTop = this.old.scrollTop
	this.$nextTick(()=>{
	this.scrollTop = 0 //赋值为0即代表返回顶部
	});
},

scrollChange(e) {
	// console.log(e)
	this.old.scrollTop = e.detail.scrollTop
},