⛳️: CSS样式中传入变量
😇: 鑫动了的主页 – 欢迎各位小伙伴
💗: 前端小白的成长之路,一起学习,一起成长~

在返回上一页时如果不想停留在当前位置,想点击或者自动回到顶部可以用下面的方法
注: 使用了scroll-view并设置高度时再使用 uni.pageScrollTo() 会失效

1.在scroll-view 标签设置两个属性 : @scroll和scroll-top
2.在methods 监听scroll视图层位置,视图层结束并赋值滚动条位置为-0
以下代码为简写 :
	<scroll-view class="list-scroll-content" :scroll-top="scrollTop" @scroll="scroll"></scroll-view >
	data () {
		return:{
		  scrollTop: 0,
		  oldScrollTop:0,
		}	
	},
	onShow() {
	    this.Topping() //自动回到顶部
	},
	methods:{
		scroll (e) {//记录scroll  位置
			this.oldScrollTop = e.detail.scrollTop
		},
		Topping(){//自动回到顶部
			this.scrollTop = this.oldScrollTop //视图会发生重新渲染
			this.$nextTick(()=>{  //当视图渲染结束 重新设置为0
				this.scrollTop = 0
			})
		},
	}

将 T o p p i n g 定义为点击事件,那么在点击它时也会实现回到顶部。 \color{#FF0000}{ 将Topping定义为点击事件,那么在点击它时也会实现回到顶部。} Topping定义为点击事件,那么在点击它时也会实现回到顶部。


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐