直播平台开发，按按钮直接滑动到顶部

直播平台开发，按按钮直接滑动到顶部

1.确定图标按钮的位置

使用绝对位置使其固定在右下角的位置。

 

1	<br>wxml:<br><icon type="download" size="45" color="#4caf50" bindtap='scrollTop'/>

​

这里使用官方的下载图标，然后修改了一下颜色。

 

1	<br>wxss:<br>icon[type=download] {<br>   position: fixed;<br>   bottom: 30px;<br>   right: 20px;<br>   transform: rotate(180deg);<br>}

 

 

为了使其不跟随滑动，修改了position为fixed。

原本箭头是向下的，使用transform: rotate(180deg)旋转180度向上。

 

2.绑定事件

 

1	bindtap='scrollTop'<br>   scrollTop: function() {<br>      wx.pageScrollTo({<br>         scrollTop: 0,<br>         duration: 300<br>      })<br>   },

 

 

在事件中，我们使用了官方的API wx.pageScrollTo，两个参数，一个是滑动的位置，一个是执行时长。

 

到此，滑动到顶部的功能就简单实现了。

 

 

3.进阶

为什么会有这一步呢，是因为发现无论滑动的距离是远还是近，执行时长都是300，那能不能优化呢，其实是可以的。

 

微信page中有一个onPageScroll方法（与onLoad平级），监听用户滑动页面事件。

那我们就可以根据滑动的距离动态设置执行时长了。

 

把时长定义为变量

 

1	data: {<br>      scrollDuration: 500,<br>   },<br>

 

在监听事件中赋值

 

1	onPageScroll: function(e) {<br>      console.log(e.scrollTop)<br>      this.setData({<br>         scrollDuration: e.scrollTop / 2<br>      });<br>   }<br>

 

e.scrollTop即为页面滑动距离

e.scrollTop / 2为执行时长，也可以设置其他值

官方提示：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。

修改滑动方法

 

1	scrollTop: function() {<br>      wx.pageScrollTo({<br>         scrollTop: 0,<br>         duration: this.data.scrollDuration<br>      })<br>   },

 

 以上就是 直播平台开发，按按钮直接滑动到顶部，更多内容欢迎关注之后的文章