uni-app拖拽悬浮球优化

房长新 發表於 2020-5-12 15:19:00

<div>使用uni-app拖拽悬浮球，插件不错，插件地址 ext.dcloud.net.cn/plugin?id=5…
<div>
 
<div>
插件挺不错的，有几点需求我改了下 1、背景图片保持纵横比缩放图片，使用aspectFit好点 2、初始化球位置时使用%比较符合实际，如果放到右底部使用px还要适配 3、拖拽超出边框没有做限制。

</div>

</div>

</div>

 
<div class="cnblogs_code">
<pre><template>
<view class="holdon" >
 <imageclass="ball" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
 @touchstart="drag_start" @touchmove.prevent="drag_hmove" :src="image"mode="aspectFit">
 </image>
</view>
</template>
<script>
export default {
 props: {
 x: {
 type: Number,
 default:0
 },
 y: {
 type: Number,
 default:0
 },
 image:{
 type:String,
 default: ''
 }
 },
 data() {
 return {
 start:[0,0],
 moveY:0,
 moveX:0,
 windowWidth:'',
 windowHeight:'',
 }
 },
 mounted() {
 const { windowWidth, windowHeight } = uni.getSystemInfoSync();
 this.windowWidth = windowWidth
 this.windowHeight = windowHeight
 },
 methods: {
 drag_start(event){
 this.start= event.touches.clientX-event.target.offsetLeft;
 this.start= event.touches.clientY-event.target.offsetTop;
 },
 drag_hmove(event){
 let tag = event.touches;
 if(tag.clientX < 0 ){
 tag[0].clientX = 0
 }
 if(tag.clientY < 0 ){
 tag[0].clientY = 0
 }
 if(tag.clientX > this.windowWidth ){
 tag[0].clientX = this.windowWidth
 }
 if(tag.clientY > this.windowHeight ){
 tag[0].clientY = this.windowHeight
 }
 this.moveX = tag.clientX-this.start;
 this.moveY = tag.clientY-this.start;
 }
 }}
</script>

<style lang="less">
.holdon{
 width: 100%;
 height: 100%;
}
.ball{
 width: 70upx;height: 70upx;
 background:linear-gradient(to bottom, #F8F8FF,#87CEFA);
 border-radius: 50%;
 box-shadow: 0 0 15upx #87CEFA;
 color: #fff;
 font-size: 30upx;
 display: flex;justify-content: center;align-items: center;
 position: fixed !important;
 z-index: 1000000;
}
</style></pre>
</div>
<img src="https://user-gold-cdn.xitu.io/2020/5/6/171e9418301935f4?imageslim">
 
<img src="https://img2020.cnblogs.com/blog/1625255/202005/1625255-20200512151804802-1242770336.png">
 

</div>
<div id="MySignature" role="contentinfo">
小小菜鸟一个，写此博客为了以后不要走重复坑，如有不足请多多指教 
来源：https://www.cnblogs.com/lpz1096/p/12876426.html

頁: [1]

琼殿技术论坛's Archiver

uni-app拖拽悬浮球优化