小程序实现一键返回顶部功能————（2020.1.7学习笔记）

这次要实现的功能是一键返回顶部功能，看上去的效果就是，用户在游览商品的时候 ，下划到一定深度就会在右下角显示出一个按钮（如下图的按钮）

点击按钮之后就可以返回到当前页面顶部。
那么要实现这个效果，首先第一步就是声明一个名为My_BackTop的自定义组件（如下图）

这个组件现在还没有一个按钮该有的样子，所以必须把组件的UI先构筑好，让其先看上去像按钮，这样就必须在该组件的wxml文件引用上文中的按钮图片（代码如下）

<view class='back-top' bindtap="handleBackTop">
    <image src="/Mall_Image/Other_Image/top.png"/>
</view>

看上去的确像按钮了，但按钮位置和大小也必须规划一下，所以必须在该组件的wxss文件上写好所需的样式（代码如下）

.back-top{
  position: fixed;
  right: 10rpx;
  bottom: 10rpx;
}
.back-top image{
  width: 100rpx;
  height: 100rpx;
}

按钮样式写好之后，就要开始写按钮的点击事件了，所以在该组件的js文件上声明一个名为handleBackTop的点击事件，该点击事件被触发之后会自动跳转到页面顶部（代码如下）

 handleBackTop()
    {
      wx.pageScrollTo({
      scrollTop:0,
      })
    }
  }

这样，一个点击之后能返回顶部的按钮基本就实现了，但我们还要保障这个按钮只有在页面被滑到一定深度才能出现，所以我们先得将按钮隐藏起来，这里先给按钮组件赋一个为false的变量，当然这个变量必须在页面的JS文件上先声明好（代码如下）

  data: {
  showBackTop:false,
  }，

然后将该变量赋给按钮组件（代码如下）

<My_BackTop wx:if="{{showBackTop}}"/>

这样按钮组件默认是隐藏状态，然后为了能在用户下滑到一定深度的时候按钮组件能从隐藏转换为显示，这里必须设置一个监听事件监听用户下滑的深度，当用户下滑深度到达预定值，就将之前赋给按钮组件的变量showBackTop变为true，这样按钮组件就能显示了，为了能做到这点我们先在页面的JS文件上声明好预定值变量，然后引用小程序自带的下滑监听事件，并在事件中判断下滑深度是否大于等于预定值（代码如下）

const TOP_DISTANCE=1000;
 onPageScroll(options)
  {
    const scrollTop=options.scrollTop;
    this.setData(
      {
        showBackTop:scrollTop>=TOP_DISTANCE
      }
    )
  },

这样效果就能全部实现好了（效果GIF如下）