微信小程序实现一键回到顶部功能
更新时间:2022年07月01日 14:41:22 作者:zuobufan
这篇文章主要为大家详细介绍了微信小程序实现一键回到顶部功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部。
遇到问题不要慌
面向百度编程 ----上代码
.wxml文件代码
<!-- 返回顶部 --> <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop"> 返回顶部 //这里可以换成一个图标 </view>
.wxss文件代码
.goTop{ height: 80rpx; width: 80rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 200rpx; background: rgba(0,0,0,.3); right: 80rpx; border-radius: 50%; z-index: 9; }
.js文件代码
Page({ /** * 页面的初始数据 */ data: { scrollTop: false, }, //回到顶部 goTop: function (e) { // 一键回到顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) } }, // 获取滚动条当前位置 onPageScroll: function (e) { if (e.scrollTop > 200) { this.setData({ scrollTop: true }); } else { this.setData({ scrollTop: false }); } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
这篇文章主要介绍了js/jquery遍历对象和数组的方法,结合实例形式分析了数组遍历的forEach,map与each方法常见使用技巧,需要的朋友可以参考下2019-02-02基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下2016-04-04JavaScript SweetAlert插件实现超酷消息警告框
SweetAlert是一款使用纯js制作的消息警告框插件.这篇文章主要介绍了JavaScript SweetAlert插件实现超酷消息警告框的相关资料,需要的朋友可以参考下2016-01-01解决JS请求路径控制台报错 Failed to launch'xxx' because t
这篇文章主要介绍了JS请求路径控制台报错 Failed to launch ‘xxx‘ because the scheme does not have a registered handler的问题,本文给大家分享最新完美解决方法,需要的朋友可以参考下2023-03-03深入探讨JavaScript异步编程中Promise的关键要点
这篇文章将全面深入地探讨Promise,包括其前身、历史、能力、优点、缺点以及提供每个方法的案例,感兴趣的小伙伴可以跟随小编一学习一下2023-06-06
最新评论