微信小程序、浮动按钮、 返回顶部 、 悬浮按钮
微信小程序 返回顶部 拨打电话 悬浮按钮
把components 文件复制到项目中
在使用组件的页面 .json文件中,添加
{
"usingComponents": {
"floatbut": "/components/floatbut/floatbut"
}
}
在使用组件的页面 .wxml 文件最底部,添加以下代码
//backTop 控制显示返回顶部按钮
<floatbut backTop="{{backTop}}"></floatbut>
在使用组件的页面 .js文件里面实现方法
data: {
backTop:false
},
//监听页面滚动
onPageScroll: function (e) {
var that = this
var scrollTop = e.scrollTop
var backTop = scrollTop > 100 ? true : false
that.setData({
backTop: backTop
})
}
项目截图:
希望大家给个星。感谢
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。