举例说明微信小程序浮动按钮

时间：2023-07-01 14:05 阅读数：100 人阅读分类：知识百科

　　微信小程序浮动按钮，我们打开一些网页都会有一些浮动的按钮，在微信小程序中也存在哟，今天小编就来说说微信小程序浮动按钮,准备了举例说明微信小程序浮动按钮，欢迎大家来围观。

　　浮动按钮

　　因为小程序中没有侧栏组件，无法做到侧滑手势显示侧栏(本人发现touchstart事件和tap事件有冲突，无法实现出手势侧滑判断，所以没有用侧滑手势，可能是本人理解太浅了，没有发现解决方法，嘿嘿…)，浮动按钮的样式参照了Android中的FloatAction经典按钮。可以浮动在界面上，还可以滑动到任意位置，背景为稍微透明。

　　.float-action { position: absolute; bottom: 20px; right: 30px; width: 50px; height: 50px; border-radius: 50%; box-shadow: 2px 2px 10px #AAA; background: #1891D4; z-index: 100; }

　　按钮的样式随便弄了一下，宽高用了px是因为后面的移动判断需要获取屏幕的宽高信息，这些信息的单位是px。wxml绑定了点击事件和移动事件，点击事件是控制侧栏弹出，滑动事件是按钮移动。

　　//浮动球移动事件 ballMoveEvent: function( e ) { var touchs = e.touches[ 0 ]; var pageX = touchs.pageX; var pageY = touchs.pageY; if( pageX < 25 ) return; if( pageX > this.data.screenWidth - 25 ) return; if( this.data.screenHeight - pageY <= 25 ) return; if( pageY <= 25 ) return; var x = this.data.screenWidth - pageX - 25; var y = this.data.screenHeight - pageY - 25; this.setData( { ballBottom: y, ballRight: x }); }

　　touchmove事件中的会传递一个event参数，通过这个参数可以获取到当前手势滑动到的具体坐标信息e.touches[ 0 ]

　　以上就是举例说明微信小程序浮动按钮的全部内容，希望能帮助到大家,更多小程序、微信小程序资讯请关注微小乔网站。