快捷導(dǎo)航

uni-app中實(shí)現(xiàn)元素拖動(dòng)效果

更新時(shí)間：2024年01月04日 11:35:24 作者：琴～～

這篇文章主要介紹了uni-app中實(shí)現(xiàn)元素拖動(dòng)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

uni-app中實(shí)現(xiàn)元素拖動(dòng)

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; // 循環(huán)播放
    },
    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; //鼠標(biāo)事件可以滲透
}
.img-layout {
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto; //恢復(fù)鼠標(biāo)事件
  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兩個(gè)組件配合實(shí)現(xiàn)