媒介
先看结果
完成了拖拽,然则可拖拽地区基层的点击事宜失效,原本做拖拽就是为了处理基层被遮挡然后没法点击
这下可好了,没法点击的地区更高了。还好从网上找到了处理办法
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.js
const 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,其他的照样很简单的轻易的
如果有什么问题
迎接留言或许增加微信议论