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

最新推荐文章于 2024-04-25 14:47:28 发布

mishu720

最新推荐文章于 2024-04-25 14:47:28 发布

阅读量994

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/mishu720/article/details/127797214

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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; 来优先触发事件