微信小程序返回顶部
2018-03-09 17:25
337 查看
微信小程序返回顶部
本博客将介绍不使用scroll-view的方法来返回顶部下面是具体的方法
- **首先我们需要实时地获取滚动条的位置,我们可以使用
onPageScroll:function(e){ // 获取滚动条当前位置 console.log(e.scrollTop) if (e.scrollTop > 100) { this.setData({ floorstatus: true }); } else { this.setData({ floorstatus: false }); } }`
来实时获取获取位置,同时,设置大于多少时设定floorstatus为true,floorstatus是来显示返回按钮的
- 返回顶部
goTop: function (e) { // 一键回到顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) } }
wxml代码
<view wx:if="floorstatus" bindtap="goTop"></view?
如果觉得好的话,随意打赏
相关文章推荐
- 微信小程序 返回顶部
- 【微信小程序】实现类似WEB端【返回顶部】功能
- 微信小程序“返回顶部”实现
- 微信小程序 --- 6行代码实现页面返回顶部
- 微信小程序,如何在返回前一个页面时,执行前一个页面的方法
- 微信小程序之分享页面如何返回首页
- 微信小程序,请求php后台返回json数据多出隐藏字符问题
- 微信小程序如何在地图选择地址并返回经纬度
- 微信小程序返回上级页面时单个数据交互
- 微信小程序开发之选项卡(窗口顶部TabBar)页面切换
- 微信小程序脱坑——多图片/文件上传,返回上传URL数组
- 技术小白之记录微信小程序顶部导航栏
- 微信小程序--鼠标事件 & 点击事件返回值的target分析
- 微信小程序怎么确定是息屏、返回、还是Home键操作?
- 微信小程序返回上级页面时单个数据交互
- 微信小程序实现点击返回顶层的方法
- [微信小程序]提交表单返回成功后自动清空表单的值
- 微信小程序实现顶部选项卡(swiper)
- 一个简单的返回顶部jQuery程序代码