前言
在之前的文章中我们在 vue 中实现了一键回到顶部的操作，今天带大家在微信小程序中实现这个小功能。
实现思路
其实微信小程序跟 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, //默认为0
cangotop: false, //回到顶部控件默认隐藏
}
},
// 获取滑动位置
onPageScroll: function (e) {
console.log("打印当前页面滚动的距离：", e.scrollTop)
//当页面滑动距离大于一屏的高度时显示回到顶部控件
this.setData({
cangotop: e.scrollTop > wx.getSystemInfoSync().windowHeight ? true : false
});
},
//回到顶部，内部调用系统API
goTopOn: 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 中如何实现一键回到顶部，大家可移步博主另一篇文章（vue实现一键回到顶部）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79469.html
