微信小程序实现可移动悬浮按钮（超简单）

微信小程序实现如丝般顺滑的可移动悬浮按钮（超简单）

最近被用户要求再每个页面显示一个悬浮按钮实现业务
虽然内心不愿意，但是身体还是得接受。。

首先偷懒百度，发现网络上都是自己捕捉touch事件做的，以我的经验这种实现方式肯定一堆bug,并且页面会卡顿，果断不踩坑。希望大家也不要踩坑~

原创地址： https://blog.csdn.net/qq_35487047/article/details/104970954

实现方案：我们可以利用微信小程序的内置组件轻松实现！
1.将整个屏幕用movable-area组件覆盖，
2.在movable-area内部添加一个movable-view实现自由滑动。
3.重点：CSS属性 pointer-events 。
代码奉上：
wxml:

  <movable-area class="movable-area"><movable-view class="movable-view" direction="all"></movable-view></movable-area>

wxss:

  .movable-area{pointer-events:none;// 这个属性设置为none,让所有事件穿透过去z-index: 100;width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;}.movable-view{ pointer-events:auto;// 重设为auto,覆盖父属性设置height: 50px;width: 50px;background: red;}

是不是非常简单？？

很讨厌网上抄袭的文档，百度一下到处都是一摸一样的，恶心人。

原创不易，转载请注明出处！！

微信小程序实现可移动悬浮按钮（超简单）相关推荐

uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义大 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序如何隐藏右上角分享按钮
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序右上角有个转发按钮可以分享转发当前页面到群或者微信好友. 右上角胶囊按钮>转发转发可以配置转发是路径参 ...
小程序源码：图片拼图微信小程序源码-多玩法安装简单
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 小程序源码:图片拼图微信小程序源码-多玩 ...
微信小程序隐藏菜单栏目下转发按钮的几个方法
隐藏微信小程序顶部的转发按钮适用范围:所有的微信小程序方式一.去除页面上的分享代码片段如下,删除即可 //删除页面里的这个分享函数 onShareAppMessage: function (opt ...
微信小程序输入账号密码点击按钮登录事件示例代码
微信小程序登录事件示例代码如下: 在页面的wxml文件中定义账号密码输入框和登录按钮: <view><input type="text" placeholder= ...

微信小程序实现可移动悬浮按钮（超简单）

微信小程序实现如丝般顺滑的可移动悬浮按钮（超简单）

微信小程序实现可移动悬浮按钮（超简单）相关推荐

最新文章

热门文章