微信小程序回到顶部小浮标

前言

最近在做微信小程序开发，简单学习一下就开始上项目了。

可能之前只做过网页应用，用了Vue 2 + Element UI做得很快很顺手，到微信小程序这边文档看得有些吃力，而且微信小程序和组件可能存在样式不兼容的问题，引入组件本身时为了快速开发，而因为不兼容问题可能反而降低了开发效率，加上公司电脑问题使得微信小程序无法构建npm项目，因此想引入依赖的话需要以非常非常原始的方法引入——下载程序源文件。于是使用了微信原生组件以及微信开发的weui组件库进行搭建。虽然有weui组件库，但感觉和使用原生组件区别不大，只是提供了一些样式，组件库的使用实例很少，经常还要到处找实例。

有时候，在一个页面会获取到大量的数据，而且在小程序很少会有分页功能，主要是我这边前端获取到的数据就是一大片的，当展示给用户的时候，页面会非常长，因此需要一些浮标进行位置导航，比如说经常看到的“回到顶部”小浮标。

实现原理

在之前做网页应用的时候，会使用<a>标签进行定位并且在页面内跳转，在Element UI中也有非常好用的组件，换个思路，网页应用还可以使用分页解决这一问题。在小程序当中，由于页面很少，因此能够摆放的元素很少，使用浮标无疑是不二选择。在微信小程序当中，提供了wx.pageScrollTo以改变滚动条的位置，具体可以看微信小程序的官方文档。这里直接给出滚动到顶部的实例。

backTop() {
  wx.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

解释一下这行代码，scrollTop是指到顶部的距离，duration是指花多少时间到达顶部，单位是毫秒。到这里我们就可以做一个到滚到顶部的小浮标了。

具体实现

这里我把小浮标做成一个组件，当然这是不是组件无伤大雅。

<view class="backtop-form" bindtap="backTop">
  ↑
</view>

.backtop-form {
  /* size */
  width: 77rpx;
  height: 77rpx;
  /* form */
  opacity: 0.4;
  border-radius: 100%;
  background-color: #0ac80a;
  /* position */
  position: sticky;
  bottom: 80rpx;
  left: 87%;
  /* font */
  color: white;
  font-size: larger;
  text-align: center;
  line-height: 77rpx;
}

.backtop-form:hover {
  opacity: 1;
}

这样子小浮标就固定在右下角啦，点击一下就会就会高亮显示并且回滚到顶部。

进阶

小程序页面少，而且元素摆法已经很密集了，在上面样式中虽然做了透明化处理(opacity)，但还有可以改进的空间。比如当用户需要它的时候就会自己出现。这时候就需要另一个接口帮忙了。

onPageScroll: function (e){
  console.log(e.scrollTop)
}

解释一下，这个是页面滚动条的监视函数，如果滚动条发生变化，会反馈到e.scrollTop当中。因此可以使用这个接口使我们的小浮标显示或者隐藏。

onPageScroll: function (e) {
  if (e.scrollTop >= 400)
    this.setData({
      backTopFlag: true
    })
  else
    this.setData({
      backTopFlag: false
    })
  },

这时候我们的组件需要新增一些东西。

新增一个隐藏样式。

.disable {
  display: none;
}

在页面中进行判断。

Component({
  properties: {
    active: {
      type: Boolean,
      value: false
    }
  },

  data: {
    active: false
  },

  methods: {
    backTop() {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
})

<view class="{{active?'backtop-form':'disable'}}" bindtap="backTop">
  ↑
</view>

这样子小浮标完成了~