微信小程序 滑动到顶部
效果：
点击上图中右下角的图标滑动到顶部。 其实很简单，但也有一些小细节。
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
})
},ok，到此就全部完成了。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
