小程序movable-area拖拽fixed点击失效

前言先看效果实现了拖拽，但是可拖拽区域下层的点击事件失效，本来做拖拽就是为了解决下层被遮挡然后无法点击这下可好了，无法点击的区域更高了。还好从网上找到了解决办法movable-view { pointer-events: auto; }movable-area { pointer-events: none;}实现悬浮icon可垂直拖拽微信小程序自带movable-area和movable-view完美的实现了areaH为可移动的高度，这里获取了手机设备的屏幕高度减去上下的留白，并且做了iPhoneX的适配resetY是让icons返回到初始位置下图蓝色区域因为是公共组件movable-view height就通过properties传入了，本来打算通过小程序的boundingClientRect方法获取，但是因为渲染速度慢，可能height为0，所以就老老实实传入<movable-area style=“height:{{areaH}}px;” class=“ex-class {{iphoneX?‘x-class’:’’}}"> <movable-view x=”{{x}}" y="{{y}}" style=“height:{{height}}px;” direction=“vertical”> <view class=“btns-bg " id=“icons-container”> <slot name=“icons”></slot> </view> </movable-view></movable-area>// components/s-icon-btns/index.jsconst App = getApp()Component({ /** * 组件的属性列表 / externalClasses: [’ex-class’], options: { multipleSlots: true }, properties: { // 容器高度 height: { type: Number, value: 0, observer(newVal, oldVal) { // 设置y初始位置 this.setData({ y: this.data.areaH - newVal }) } }, resetY: { // 与!wiggle type: Boolean, value: false, observer(newVal, oldVal) { this.setData({ y: this.data.areaH - this.data.height }) } } }, /* * 组件的初始数据 / data: { iphoneX: App.globalData.isIphoneX, x: 10, areaH: App.globalData.isIphoneX ? App.globalData.mobile.windowHeight - 240 : App.globalData.mobile.windowHeight - 180 //可动区域 }, /* * 组件的方法列表 */ methods: {}}).btns-bg { // position: fixed; // right: 10px; // bottom: 110px; // z-index: 1000; background: rgba(255, 255, 255, 0.9); width: 45px; min-height: 45px; border-radius: 45px; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 10px 0; box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.07); &.lower { bottom: 61px; }}.x-class { margin-bottom: 68rpx;}movable-view { pointer-events: auto; width: 45px; padding: 10px; box-sizing: content-box;}movable-area { pointer-events: none; position: fixed; right: 0px; bottom: 70px; z-index: 1000; width: 65px; overflow: hidden;}总结除了遇见的bug，其他的还是很简单的方便的如果有什么问题欢迎留言或者添加微信讨论