前言

提示：微信小程序如何自定义回到顶部以及回到顶部按钮需要什么时候显示：

例如：

提示：以下是本篇文章正文内容，下面案例可供参考

一、自定义回到顶部按钮

示例： bindtap=“hddb” 绑定方法， hidden="{{boock}}"默认是隐藏

<view class="hddb" bindtap="hddb"  hidden="{{boock}}"> 回到顶部</view>

二、使用步骤

1.第一步获取屏幕被卷去多少距离

代码如下（示例）：

onPageScroll(e){console.log(e.scrollTop);},

2.进行判断，例如我需要屏幕滚到大于600的时候就显示回到顶部的按钮

代码如下（示例）：

 var juli=e.scrollTopif(juli>=600){console.log("mnj");this.setData({boock:false})}

这里还需要判断当小于600时候就隐藏

else{this.setData({boock:true})}

完整判断

//获取屏幕被卷多少距离   用来显示回到顶部按钮onPageScroll(e){console.log(e.scrollTop);var juli=e.scrollTopif(juli>=600){console.log("mnj");this.setData({boock:false})}else{this.setData({boock:true})}},

3.设置回到顶部按钮


hddb(e){console.log(e);wx.pageScrollTo({scrollTop:0, //滚到顶部 duration: 0.5,//滚的到顶部需要的时间  动画})},

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了onPageScroll的使用，而onPageScroll提供了对屏幕滚动进行监听，从而获取scrollTop的值。

微信小程序自定义回到顶部相关推荐

告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
微信小程序自定义navigationBar顶部导航栏，兼容安卓ios
1.设置导航栏自定义"navigationStyle":"custom" "pages": [ //pages数组中第一项表示应用启动页,参 ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义顶部nav 和底部tabbar
文章目录一.微信小程序自定义Nav: 1.首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏: ...
关于微信小程序如何去掉顶部标题，自定义标题详细讲解
关于微信小程序如何去掉顶部今天工作要求去掉小程序顶部,做成自定义样式,百度后看到一码友写的不错,附上链接:自定义小程序顶部下面是我新建后做的例子: 首先新建后结构如下:(图片是我自己添加的,用于顶 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...

微信小程序自定义回到顶部

文章目录

前言