前言
在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章。我将为大家介绍一种简单而实用的方法,让你轻松实现“一键回到顶部”的功能,让你的微信小程序使用更加便捷舒适。
实现思路
其实微信小程序跟vue
实现的原理都大差不差,不同的是微信小程序有自己的方法,通过调用wx.pageScrollTo(Object object)
方法即可实现该操作。
wx.pageScrollTo(Object object)
该方法可实现将页面滚动到目标位置,支持选择器和滚动距离两种方式定位。
如果你想要更深入的了解该方法,可查看 官方文档说明
话不多说,下面进入实操。
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;}
实现效果展示
相关推荐
⭐ vue实现一键回到顶部