微信小程序实现一键回到顶部功能
更新时间：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
});
}
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JavaScript截取指定长度字符串点击可以展开全部代码 的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了原生js拖拽实现图形的伸缩效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
下面小编就为大家带来一篇用JavaScript实现让浏览器停止载入页面的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
抖动效果在各大网页上都常遇到，这篇文章主要介绍了JavaScript实现窗口抖动效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了微信小程序滑块验证方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了JavaScript实现伸缩二级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在我们日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,这篇文章主要给大家介绍了关于javascript遍历对象的五种方式,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了抖音上用记事本编写"爱心"小程序教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
本篇文章通过仿照淘宝搜索关键字后下拉相关产品搜索样子的制作，深度分析了JSsearch的用法，一起跟着小编学习下吧。2018-01-01
最新评论