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

前置问题

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

功能展示

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

动画.gif

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

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

真相只有一个!

u=748479884,1187641057&fm=253&fmt=auto&app=138&f=JPEG.webp

具体分析

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

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

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

按钮的固定悬浮

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

按钮的显示与隐藏

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

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

回到顶部

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

 trunTop() {
        this.setData({
            topDistance: 0
        })
    },

总结

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