这篇文章主要介绍了微信小程序如何实现回到顶部效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
网站建设哪家好，找
创新互联！专注于网页设计、网站建设、微信开发、
微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了
新野免费建站欢迎大家使用！
微信小程序实现回到顶部效果
这里小程序有个组件是可以实现的，那就是scroll-view组件，他具有很多的属性，其中我们要利用到以下两个属性来处理：
scroll-top Number 设置竖向滚动条位置
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
通过滚动触发事件，获取距离文档顶部的scrollTop值，当达到一定条件【>300】的时候，显示gotop层，针对这个层写点击事件，重新设置scroll-top值，偶然间发现设置scroll-top的一个bug，如果我下一次设置的值和本次scroll-top值是一样的，那么文档并不会有任何动作。因此我的做法是在0和1之间切换设置，具体做法如下：
123456
----{{test}}
JS:
Page({
data: {
test: "",
scrollTop: {
scroll_top: 0,
goTop_show: false
}
},
scrollTopFun: function (e) {
console.log(e.detail);
if (e.detail.scrollTop > 300) {//触发gotop的显示条件
this.setData({
'scrollTop.goTop_show': true
});
console.log(this.data.scrollTop)
} else {
this.setData({
'scrollTop.goTop_show': false
});
}
},
goTopFun: function (e) {
var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断
if (_top == 1) {
_top = 0;
} else {
_top = 1;
}
this.setData({
'scrollTop.scroll_top': _top
});
console.log("----");
console.log(this.data.scrollTop)
}
})最终效果如下：
感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序如何实现回到顶部效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
新闻名称：微信小程序如何实现回到顶部效果-创新互联
网址分享：
http://bjjierui.cn/article/dehsid.html
