scroll-view回到顶部功能的实现

在我最近写的一个项目中就有这样的一个需求，即无限滚动卡片列表中实现回到顶部，与已往的返回顶部功能不同，因为是通过scroll-view来实现的无限列表滚动，所以返沪顶部需要依靠scroll-view的一些特定属性和api，下面我将带大家分析，实现这个功能。

功能展示

我们先搞懂整体的功能最后实现起来是怎么样的，来看图！

这张动图展现的是该功能的成品，大概的需求是这样的：

我们开始滚动的时候，返顶按钮是隐藏的，当我们向下滚动的时候按钮是出现的，而当滚动的时候控制台也会滚动出一些东西，这里下面会提到，了解完需求后，是时候来分析一波了~

真相只有一个！

具体分析

大家肯定彻底了解这个功能，那么将整体的功能拆分一下，就会得到三个实现步骤。

1. 列表滚动的时候，按钮是需要固定在页面的某个位置上，不随列表滚动
2. 初始状态时需要隐藏返回顶部按钮，当滚动到一定距离的时候显示返回顶部按钮
3. 点击返回顶部按钮，列表的可视区域会滚动到开始位置。

总结起来这三个问题，分别是按钮的固定悬浮，控制按钮的显示与隐藏以及回到顶部，下面来一一介绍三个要点的实现。

按钮的固定悬浮

悬浮按钮的固定主要是依靠position:fixed完成的，fixed可以让元素以窗口为参照点进行定位，所以可以控制元素在屏幕上的位置固定不变，下面我拿码上掘金的代码块来复现按钮的固定悬浮及其样式

按钮的显示与隐藏

小程序这个功能是这个样子的，在顶部的时候，将按钮隐藏，在底部的时候将按钮显示，这个需要对滑块与顶部的距离进行监听，来控制按钮的显隐，所以需要两个东西，bindscroll与hidden

bindscroll

bindscroll可以绑定滚动监听函数，当滚动区域滚动的时候会触发绑定事件

<scroll-view class="enroll-page-container" scroll-y="true"  bindscroll="onMonitor" scroll-left > </scroll-view> 复制代码

上面是一个简易的滚动区域，我们设定了onMonitor作为监听函数，当滚动的时候会实时触发，那么知道了这个滚动监听函数，问题就迎刃而解了，在函数内接受e参数，参数内包含了scroll-view的一个属性为scrollTop拿到这个属性后就可以根据滑动距离来控制按钮的显示与隐藏

onMonitor(e) {
        if(e.detail.scrollTop > 150) {
            this.setData({
                isTop:false            })
        }else {
            this.setData({
                isTop:true            })
        }
    }, 复制代码

hidden

为什么要使用hidden而不使用wx:if，这里大佬肯定能知道是为什么，hidden与wx:if的选用是根据场景来的，hidden能保留元素，wx:if不保留元素，所以如果元素需要频繁的显示与消失，为了避免节点的销毁与生成影响性能，所以必须使用hidden来控制。

回到顶部

回到顶部这个功能也需要搭配scroll-view的属性来实现，即scroll-top，距离顶部的距离，绑定变量后，添加回到顶部事件，将其置为0即可

trunTop() {
        this.setData({
            topDistance: 0        })
    }, 复制代码

总结

每个需求的实现都需要整理，分析，拆分，根据每个要点的特性，在文档查找相关的api与属性，就能成功实现需求！