uniapp封装一个可移动的定位图标

最新推荐文章于 2024-03-12 15:19:21 发布

qq_51538602

最新推荐文章于 2024-03-12 15:19:21 发布

阅读量503

点赞数

分类专栏： uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_51538602/article/details/133751734

版权

uniapp 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<movable-area class="movable-area">
           <movable-view class="movable-view" :x="x" :y="y" direction="all">
               <image @click="goHome" class="contactImg" src="/static/images/homeIcon.png"></image>
           </movable-view>
</movable-area>

js部分

<script>
   export default {
       data() {
           return {
               x: 320, //x坐标
               y: 520, //y坐标
           }
       },
       methods: {
           goHome() {
               uni.switchTab({
                   url: "/pages/index/index"
               })
           },
       }
   }
</script>

css部分

<style lang="scss" scoped>
   $all_width: 110rpx;
   $all_height: 110rpx;

   .movable-area {
       height: 100vh;
       width: 750rpx;
       top: 0;
       position: fixed;
       pointer-events: none; //此处要加，鼠标事件可以渗透
       z-index: 9999;

       .movable-view {
           width: $all_width;
           height: $all_height;
           pointer-events: auto; //恢复鼠标事件

           image {
               width: $all_width;
               height: $all_height;
           }
       }
   }

   .contactImg {
       border-radius: 50%;
       width: 110rpx;
       height: 110rpx;
       box-shadow: 0 0 16rpx 4rpx rgba(0, 0, 0, 0.2);
   }
</style>