文章来源地址https://www.toymoban.com/news/detail-587428.html
页面
// 返回顶部
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;
},
文章来源:https://www.toymoban.com/news/detail-587428.html
到了这里,关于uniapp中页面和scrollview两种滚动到顶部原来这么优雅的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!