小程序悬浮可移动按钮（taro框架）
2020-12-07 12:19 小罗世界 阅读(927) 评论(0) 编辑 收藏 举报不用自己再去计算按钮的位置直接使用
class App extends Components {
render () {
return (
<MovableArea style=\'height: 200px; width: 200px; background: red;\'>
<MovableView style=\'height: 50px; width: 50px; background: blue;\' direction=\'all\'>旅行的意义</MovableView>
</MovableArea>
)
}
}
但是这里有一个小坑，对于初次使用来说，就是设定他的可移动区域，在底层的所有点击事件就无法点击，这里就要用到css中事件穿透属性：
pointer-events:none;
/* 这个属性设置为none,让所有事件穿透过去 */如下代码：
View Code
.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: 100rpx; width: 120rpx; /* background: red; */ }
当然自己也可以写移动位置，但是人家写出啦就直接用，不过还是自己去写比较好哟，taro小程序悬浮按钮移动参考：
https://blog.csdn.net/weixin_43497384/article/details/106690717
用taro组件写的如下：
<MovableArea className=\'customPage-MovableArea\'> <MovableView direction=\'vertical\' y={windowData.safeArea.height-300} x={windowData.safeArea.width-30} className=\'customPage-MovableView\' > <View className={`home-service ${isChooseMore ? \'active\' : \'\'}`}> { isChooseMore ? <View className=\'home-service-choose\'> <View className=\'choose-wechat\' onClick={this.copyWechat.bind(this)}> <View className=\'choose-call-logo\'></View> 客服微信 </View> <Button openType=\'contact\' hoverClass=\'none\' className=\'choose-call\'> <View className=\'choose-call-logo\'></View> 客服聊天 </Button> <View className=\'choose-phone\' onClick={this.callPhone.bind(this)}> <View className=\'choose-call-logo\'></View> 客服电话 </View> <View className=\'choose-hide\' onClick={this.setChooseState.bind(this, false)}></View> </View> : <View className=\'home-service-pic\' onClick={this.setChooseState.bind(this, true)} ></View> } </View> </MovableView> </MovableArea>
样式如下：
.customPage-MovableArea { width: 100%; height: 100vh; position: fixed; z-index: 2; pointer-events: none; .customPage-MovableView { padding: 20% 13% 20% 5%; pointer-events: auto; .home-service { width: 100px; height: 100px; transition: height 0.3s; z-index: 11; background: #fff; border-radius: 50px; border: 1px solid #eee; &.active { height: 350px; overflow: hidden; } .home-service-pic { width: 100px; height: 100px; background: url(\'../../static/image/service.png\'); background-size: 100%; } .home-service-choose { height: 232px; background: #FFFFFF; border-radius: 40px; .choose-call { height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; padding: 0; background-color: transparent; line-height: 1.5; .choose-call-logo { width: 31.28px; height: 45.42px; background-image: url(\'./image/music.png\'); background-repeat: no-repeat; background-size: 100%; margin-bottom: 2px; } &::after { opacity: 0; } } .choose-phone { height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; .choose-call-logo { width: 31.28px; height: 31.28px; background-image: url(\'./image/phone.png\'); background-repeat: no-repeat; background-size: 100%; margin-bottom: 6px; } } .choose-wechat { height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; padding: 0; background-color: transparent; line-height: 1.5; .choose-call-logo { width: 31.28px; height: 31.28px; background-image: url(\'./image/wechat.png\'); background-repeat: no-repeat; background-size: 100%; margin-bottom: 6px; } } .choose-hide { width: 58.71px; height: 36.39px; margin: 8px auto; background-image: url(\'./image/hide.png\'); background-repeat: no-repeat; background-size: 18.71px 16.39px; background-position: center; } } } } }
感谢每次遇到的问题。初学者的笔记
