Toggle navigation
登录
注册
模板风格
购买
商业授权
主机域名
专业授权
代理加盟
小程序
帮助
视频教程
易优技巧
常见问题
易优手册
标签工具
案例
应用市场
源码
插件
问答
组件库
小程序模板网
首页
小程序模板网
开发文档
小程序开发教程
正文
微信小程序实现滚动回到顶部的两种方式
wxml页面:catchtap阻止冒泡事件。
<view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
<view>回到顶部</view>
</view>
二、在scroll-view形式下回到顶部
<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
<view>回到顶部</view>
</view>
</scroll-view>
JS页面代码段:
data:{
topNum: 0
}
// 获取滚动条当前位置
scrolltoupper:function(e){
console.log(e)
if (e.detail.scrollTop > 100) {
this.setData({
cangotop: true
});
} else {
this.setData({
cangotop: false
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
this.setData({
topNum:0
});
},
易优小程序(企业版)+灵活api+前后代码开源
码云仓库:
本文地址:https://www.eyoucms.com/wxmini/doc/course/26362.html
复制链接
如需定制请联系易优客服咨询:800182392
点击咨询
热门问题
最新问题
1
微信小程序自定义组件 - 表格组件来啦
2
微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)
3
手机界面设计尺寸规范
4
小程序-记牌器
5
微信小程序app.json文件常用配置说明
6
微信小程序获得session_key和openId(加解密、签名系列)
7
微信小程序|实现界面滑动切换
8
小程序登录的最优流程
9
微信小程序尺寸单位rpx和样式使用详解
10
微信小程序-scroll-view滚动到指定位置(类似锚点)
1
微信小程序app.json文件常用配置说明
2
微信小程序文字控制单行超过显示省略号
3
微信小程序参数传递的几种方法
4
微信小程序使用button按钮分享
5
微信小程序的setData
6
小程序分享,获取openid
7
微信小程序-实现tab
8
微信开发者工具新建和导入小程序
9
微信小程序实现点击拍照长按录像功能
10
微信小程序必知知识
产品
商业授权
开通会员
代理加盟
推荐主机
服务
更新日志
用户案例
加入Q群
增值服务
帮助
易优问答
标签手册
易优技巧
功能字典
关于
关于易优
知识产权
版权声明
隐私协议
工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务
联系我们
QQ在线咨询
在线客服
加入Q群
新手福利
微信客服
工作日 8:30-12:00 14:30-18:30