解决movable-view拖拽组件问题

最新推荐文章于 2025-06-16 15:16:17 发布

echo008

最新推荐文章于 2025-06-16 15:16:17 发布

阅读量8.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/echo008/article/details/81113430

小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种小程序中实现拖拽功能的方法，通过movable-view组件实现元素在屏幕上的自由移动，并提供了完整的代码示例，包括wxml、wxss及js部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 小程序拖拽组件 ### 微信开发工具导入项目

  新建项目 -> 导入src文件 -> 预览效果

截图预览

组件代码

movable.wxml

  <movable-area class='movable-box'>
    <slot/>
    <movable-view
      class='movable-btn'
      x='{{x}}'
      y='{{y}}'
      direction='all'
      bindtap='goEvt'>
      <navigator
        target='miniProgram'
        open-type='navigate'
        app-id=''
        path=''
        extra-data=''
        version='release'>小程序</navigator>
    </movable-view>
  </movable-area>

movable.wxss

  .movable-box {
    width: 100vw;
    height: 100vh;
  }
  .movable-btn {
    position: fixed;
    width: 100rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: #ccc;
    border-radius: 50%;
    font-size: 30rpx;
  }

movable.js

  let {
    windowWidth,
    windowHeight
  } = wx.getSystemInfoSync()

  Component({
    properties: {
      x: {
        type: Number,
        value: windowWidth - 70
      },
      y: {
        type: Number,
        value: windowHeight - 75
      }
    }
  })