微信小程序 滑动到顶部

效果：

点击上图中右下角的图标滑动到顶部。 其实很简单，但也有一些小细节。

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，到此就全部完成了。