微信小程序实现一键返回顶部

1.实现效果

2.实现原理

onPageScroll事件，监听页面滚动事件，当页面滚动超过一定高度，显示出一键返回顶部的按钮。

wx.pageScrollTo事件，实现一键返回顶部。
将页面滚动到目标位置，支持选择器和滚动距离两种方式定位。

3.实现代码

// pages/actualPage/oneTop/index.js
Page({data: {no_scroll: true,},onLoad: function (options) {},onShow: function () {},goTop: function (e) {if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: '提示',content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'})}},onPageScroll: function (e) {if (e.scrollTop > 200) {this.setData({no_scroll: false});} else {this.setData({no_scroll: true});}}
})

<view class="fix_btn" hidden='{{no_scroll}}' bindtap="goTop"><image class="icon" src="https://i.postimg.cc/NFDWnd3H/image.png"></image>
</view>
<block wx:for="{{40}}" wx:key="list"><view class="item">{{index+1}}.苏苏</view>
</block>

.fix_btn {width: 100rpx;height: 100rpx;position: fixed;z-index: 10;bottom: 220rpx;right: 20rpx;
}.icon {width: 100%;height: 100%;border-radius: 50%;
}.item {border-radius: 20rpx;margin: 20rpx auto;width: 710rpx;padding: 20rpx;font-size: 28rpx;color: #333;box-sizing: border-box;background-color: #fff;
}

4.更多小程序源码，关注苏苏的码云！

微信小程序实现一键返回顶部相关推荐

STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台
STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台 Wi-Fi 配网,指由外部向 Wi-Fi 设备提供 SSID 和密码(PSW),让 Wi-Fi 设备可以连接指 ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
隐藏微信小程序左上角的返回或home按钮 wx.hideHomeButton
隐藏微信小程序左上角的返回或home按钮用的是 wx.hideHomeButton方法,但是这个方法是有限制的,管网说得又不清不楚,在百度也找不到相关的问题在用这个方法的时候遇到过很多问题和官方 ...
微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...
微信小程序实现一键查询全国快递物流地图轨迹
随着电子商务的快速发展,物流行业成为了一个关键的领域.对于用户来说,了解快递物流的实时状态和轨迹信息非常重要.本教程将介绍如何在微信小程序中实现一键查询全国快递物流地图轨迹的功能.通过这个功能,用户可 ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
微信小程序判断服务器返回值,让微信小程序内置函数返回promise的方法
Promise API const promisic = function (func) { return function (params = {}) { return new Promise((r ...
js微信小程序页面左上角返回跳转指定页面
微信小程序非导航栏tabBar页面左上角返回默认返回上一次的页面(即进入当前页面的前一页面),如果需要自定义页面,可以通过js中onUnload函数进行指定页面跳转. ①关闭所有页,打开url指定页面 ...
微信小程序如何实现返回上一页功能
微信小程序之返回上一页实现方法先介绍三种跳转方式: 1.B页面自带返回按钮 wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返 ...

微信小程序实现一键返回顶部

1.实现效果

2.实现原理

3.实现代码

4.更多小程序源码，关注苏苏的码云！

微信小程序实现一键返回顶部相关推荐

最新文章

热门文章