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

问题：在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 }

Adasunshine

1206人浏览 · 2021-04-12 17:31:14

Adasunshine · 2021-04-12 17:31:14 发布

问题：在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
},