告别繁琐滑动，微信小程序一键回到顶部功能

前言

在日常使用微信小程序时，你是否曾经遇到过翻页疲劳的问题？或者在滑动页面时不断滑动才能回到顶部的尴尬情况？如果是这样，那么你一定不想错过今天的文章。我将为大家介绍一种简单而实用的方法，让你轻松实现 “一键回到顶部” 的功能，让你的微信小程序使用更加便捷舒适。

实现思路

其实微信小程序跟 vue 实现的原理都大差不差，不同的是微信小程序有自己的方法，通过调用 wx.pageScrollTo(Object object) 方法即可实现该操作。

wx.pageScrollTo(Object object)

该方法可实现将页面滚动到目标位置，支持选择器和滚动距离两种方式定位。

属性	描述
scrollTop	滚动到页面的目标位置，单位 px
duration	滚动动画的时长，单位 ms
selector	选择器
offsetTop	偏移距离，需要和 selector 参数搭配使用，可以滚动到 selector 加偏移距离的位置，单位 px
success	接口调用成功的回调函数
fail	接口调用失败的回调函数

如果你想要更深入的了解该方法，可查看官方文档说明

话不多说，下面进入实操。

wxml 代码

catchtap是阻止冒泡事件

<view><!-- 占位容器 --><view wx:for="{{100}}">内容...</view><!-- 回到顶部 --><scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"><view class="gotopBox" hidden='{{!cangotop}}' catchtap="goTopOn">⬆️</view></scroll-view>
</view>

js 代码

const app = getApp()
Page({data: {data: {topNum: 0, //默认为0cangotop: false, //回到顶部控件默认隐藏}},// 获取滑动位置onPageScroll: function (e) {console.log("打印当前页面滚动的距离：", e.scrollTop)//当页面滑动距离大于一屏的高度时显示回到顶部控件this.setData({cangotop: e.scrollTop > wx.getSystemInfoSync().windowHeight ? true : false});},//回到顶部，内部调用系统APIgoTopOn: function (e) {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: '提示',content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'})}}
})

css 样式

.gotopBox {position: fixed;right: 40rpx;bottom: 60rpx;font-size: 54rpx;
}

实现效果展示

告别繁琐滑动，微信小程序一键回到顶部功能相关推荐

记录一下微信小程序-一键复制链接功能
记录一下微信小程序-一键复制链接功能 //首先是小程wxml文件<button bindtap="copyBtn" data-id="下载链接" clas ...
微信小程序自定义回到顶部
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.自定义回到顶部按钮二.使用步骤 1.第一步获取屏幕被卷去多少距离 2.进行判断,例如我需要屏幕滚到大于600的时 ...
微信小程序一键已读功能实现
页面展示效果如图需求:点击全部标记已读样式改变按钮'全部标记已读'以及右上角条数消失右上角条数显示实际未读条数当未读大于99条时显示··· 页面布局.wxml <!-- 通知公告 - ...
微信小程序一键置顶操作详解：
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
微信小程序云开发——常用功能2：操作云数据库一键批量导入数据（导入json文件）
微信小程序云开发--常用功能2:操作云数据库一键批量导入数据(导入json文件) 今天我们要添加100条数据.下面的过程是先创建一条记录,然后导出这条数据看json文件中是如何编辑字段的,然后仿照这个 ...
织梦微信小程序一键生成插件(资讯案例模板），整合织梦CMS一切数据信息
<织梦微信小程序一键生成插件(资讯模板)>是织梦58发布的便于生成微信小程序的插件,让用户更方便生成资讯类小程序. 版本:1.1(当前1.0版本,下载安装之后可以进行更新升级) 使用该插件 ...
最新开源微信小程序一键开发平台源码支持15大功能模块+完整前后端+搭建教程
分享一个开源微信小程序一键开发综合平台源码,系统支持15大小程序功能模块,涉及各行各业,含完整前后端+详细搭建部署教程. 系统特色功能一览: 1.全新重构升级功能后端文件和前端文件: 2.整套源码已经 ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...

告别繁琐滑动，微信小程序一键回到顶部功能

前言

实现思路

wx.pageScrollTo(Object object)

实现效果展示

相关推荐

告别繁琐滑动，微信小程序一键回到顶部功能相关推荐

最新文章

热门文章