微信小程序中悬浮窗功能的实现代码微信小程序中悬浮窗功能的实现代码
悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。本文给大家分享一个比较常见的常见，通过实例代
码给大家介绍微信小程序中悬浮窗功能的实现，一起看看吧
问题场景问题场景
所谓悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。
这算是一个比较常见的实现场景了。
为什么要用cover-view做悬浮窗？原生组件出来背锅了~
最初我做悬浮窗用的不是cover-view，而是view。
这是简化的代码结构：
index.wxml:
<view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">
<image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
</image>
</view>
<textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
<view>
一大段test，占个位，表示下存在感
</view>
index.js:
Page({
/**
* 页面的初始数据
*/
data: {
left: 20,
top: 250,
isIos: true
},
/**
* 拖拽移动
*/
setTouchMove: function (e) {
if (e.touches[0].clientX > 0 && e.touches[0].clientY > 0) {
this.setData({
left: e.touches[0].clientX - 30,
top: e.touches[0].clientY - 30
})
} else {
this.setData({
left: 20, //默认显示位置 left距离
top: 250 //默认显示位置 top距离
})
}
},
/**
* 返回首页
*/
goToHome: () => {
wx.reLaunch({
url: '/pages/index/index',
})
}
})
为什么要用cover-view呢？
因为页面上有个textarea组件，这个组件是原生组件，当悬浮窗移动到这个textarea组件上时，将无法继续拖动和点击。
如果悬浮窗一开始就定位在textarea上，那么就更惨了，一开始就不能点击和拖动了。
这个原因时因为微信小程序的原生组件层级高于非原生组件，不是你修改几下样式就能解决的问题。
这里就不讲什么原生组件了，如果想进一步了解，可以参考我之前写的一篇博客：微信小程序在ios下Echarts图表不能滑动的解决方
案。
如果你的页面上面没有原生组件，那么像上面的代码一样用view做悬浮窗即可。
如果有，那么就可以跟着我继续踩坑，使用cover-view这个原生组件层级的组件来做悬浮窗。
weixin_38737366
- 粉丝: 5
- 资源: 950
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论0