javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uni-app元素拖动

uni-app中实现元素拖动效果

作者:琴~~

这篇文章主要介绍了uni-app中实现元素拖动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

uni-app中实现元素拖动

1、代码示例

<template>
  <movable-area class="music-layout">
    <movable-view class="img-layout" :x="x" :y="y" direction="all">
      <img :src="musicDetail.bgUrl" :class="[ isPlay ? 'rotate-img' : '']" @click="onImgClick">
      <view class="small-circle"></view>
    </movable-view>
  </movable-area>
</template>
<script>
export default {
  name: "music-icon",
  props: {
    musicDetail: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      innerAudioContext: {},
      x: 300,
      y: 500,
      isPlay: true,
    }
  },
  watch: {
    musicDetail: {
      handler(newVal, oldVal) {
        if (newVal.music) {
          this.handlePlay();
        }
      },
      immediate: true
    }
  },
  methods:{
    handlePlay() {
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.src = this.musicDetail.music;
      this.innerAudioContext.startTime = 0;
      this.innerAudioContext.play();
      this.innerAudioContext.loop = true; // 循环播放
    },
    onImgClick() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.innerAudioContext.play();
      } else {
        this.innerAudioContext.pause();
      }
    }
  }
}
</script>
<style scoped lang="scss">
.music-layout {
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none; //鼠标事件可以渗透
}
.img-layout {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto; //恢复鼠标事件
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .small-circle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20rpx;
    height: 20rpx;
    background-color: white;
    border-radius: 50%;
  }
}
.rotate-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  transform-origin: center center;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

利用的是uni-app中的movable-area和movable-view两个组件配合实现

2、效果图展示

在这里插入图片描述

到此这篇关于uni-app中实现元素拖动的文章就介绍到这了,更多相关uni-app元素拖动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文