uniapp中页面和scrollview两种滚动到顶部原来这么优雅

一个喜欢简单的前端

已于 2022-09-27 17:42:23 修改

阅读量2.8k

点赞数 2

分类专栏：前端uniapp常用功能学习文章标签： uni-app 前端 javascript 微信小程序 vue.js

于 2022-09-27 17:13:35 首次发布

本文链接：https://blog.csdn.net/m0_61384071/article/details/127074563

版权

前端uniapp常用功能学习专栏收录该内容

4 篇文章 1 订阅

订阅专栏

页面

// 返回顶部
			getTotop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			//滚动监听
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
				this.flag = e.scrollTop > 650;
				// this.skuMaskInnerClass = "kr-animate animate-fast animate-fadeInUpBigGotop";
			},

scrollview

<scroll-view scroll-y="true" class="nft_info" @scrolltolower='scrolltolower' @scroll="getScroll"
			:scroll-top="scrollTop">

<scroll-view>


getTotop() {
				// this.scrolltops = 0;
				//优化版
				this.scrollTop = this.oldScrollTop;
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			// scroll-view 触发事件
			getScroll(event) {
				this.oldScrollTop = event.detail.scrollTop;
				// this.scrolltops = event.target.scrollTop;
				// if (event.target.scrollTop > 300) {
				// 	this.isTotop = true;
				// } else {
				// 	this.isTotop = false;
				// }
				this.flag = event.target.scrollTop > 300;
			},