;

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

2022-08-21 阅读:498
;
您当前位置:首页 | 新闻列表 | 新闻详情

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

功能展示

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

动画.gif

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

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

真相只有一个!

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

具体分析

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

  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与属性,就能成功实现需求!


上一篇:在上海需做个微信小程序商城多少开发费用? 下一篇:开发一个能赚钱的小程序,微信换头像小程序,奉上源码

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 全平台开发 网站建设 外包开发 自主研发产品

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部