直播平台开发，按按钮直接滑动到顶部
1.确定图标按钮的位置
使用绝对位置使其固定在右下角的位置。
wxml:
<icon type="download" size="45" color="#4caf50" bindtap='scrollTop'/>
这里使用官方的下载图标，然后修改了一下颜色。
wxss:
icon[type=download] {
position: fixed;
bottom: 30px;
right: 20px;
transform: rotate(180deg);
}
为了使其不跟随滑动，修改了position为fixed。
原本箭头是向下的，使用transform: rotate(180deg)旋转180度向上。
2.绑定事件
bindtap='scrollTop'
scrollTop: function() {
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
},
在事件中，我们使用了官方的API wx.pageScrollTo，两个参数，一个是滑动的位置，一个是执行时长。
到此，滑动到顶部的功能就简单实现了。
3.进阶
为什么会有这一步呢，是因为发现无论滑动的距离是远还是近，执行时长都是300，那能不能优化呢，其实是可以的。
微信page中有一个onPageScroll方法（与onLoad平级），监听用户滑动页面事件。
那我们就可以根据滑动的距离动态设置执行时长了。
把时长定义为变量
data: {
scrollDuration: 500,
},
在监听事件中赋值
onPageScroll: function(e) {
console.log(e.scrollTop)
this.setData({
scrollDuration: e.scrollTop / 2
});
}
e.scrollTop即为页面滑动距离
e.scrollTop / 2为执行时长，也可以设置其他值
官方提示：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。
修改滑动方法
scrollTop: function() {
wx.pageScrollTo({
scrollTop: 0,
duration: this.data.scrollDuration
})
},
以上就是 直播平台开发，按按钮直接滑动到顶部，更多内容欢迎关注之后的文章
标签：顶部,按钮,直播,scrollTop,滑动,onPageScroll From： https://www.cnblogs.com/yunbaomengnan/p/16880313.html