微信小程序movable-area制作悬浮按钮

效果图如上，在屏幕上显示一个可以拖动的悬浮按钮

WXML代码

<movable-area class="movable-area" >
<movable-view class="movable-view" direction="all" bindtap='gologin'>
<image src="http://218.75.219.243:8080/shuxue/暂停.png"></image>
</movable-view>
</movable-area>

movable-area 代表可移动的区域，movable-view代表可以移动的模块

WXSS代码

.movable-area{
pointer-events:none;
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
left:
0%;
top: 0%;
}
.movable-view{
pointer-events:auto;
height: 50px;
width: 50px;
left:
80%;
top: 70%;
}

 movable-area 用了绝对定位, z-index: 100;显示在最上层，相当于在原有的页面上铺上一层可以移动的区域，注意为了不影响原有页面上的事件触发，使用 pointer-events:none;  而movable-view 用  pointer-events:auto; 来优先触发事件

最后

以上就是沉默乌冬面为你收集整理的微信小程序movable-area制作悬浮按钮的全部内容，希望文章能够帮你解决微信小程序movable-area制作悬浮按钮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。