微信小程序悬浮按钮实现

最新推荐文章于 2024-08-22 01:28:37 发布

朝渔同歌

最新推荐文章于 2024-08-22 01:28:37 发布

阅读量709

点赞数

分类专栏：微信小程序随笔文章标签：小程序前端 css

本文链接：https://blog.csdn.net/weixin_43926650/article/details/115049897

版权

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

3 篇文章 0 订阅

订阅专栏

先看看效果：

可以在界面中随便移动
在这里插入图片描述
代码很少，直接上代码：

wxml文件

<movable-area class="movable-area">
    <movable-view class="movable-view" direction="all" catchtap="toAddConsult">
      <view class="plus-position">+</view>
    </movable-view>
</movable-area>

wxss文件

.movable-area{
  pointer-events:none;
  z-index: 100;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
.movable-view{ 
  pointer-events:auto;
  height: 50px;
  width: 50px;
  border-radius:50px;
  /* position:fixed; */
  background:orange;
  line-height:50px;
  font-size:25pt;
  color:#fff;
}
.plus-position {
  margin-left: 25rpx;
  margin-bottom: 15rpx;
}