解决movable-view拖拽组件问题

# 小程序 拖拽组件 ### 微信开发工具导入项目
  新建项目 -> 导入src文件 -> 预览效果
截图预览
解决movable-view拖拽组件问题_第1张图片 解决movable-view拖拽组件问题_第2张图片 解决movable-view拖拽组件问题_第3张图片

组件代码

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
      }
    }
  })

movable.json

  {
    "component": true
  }

链接地址

github: 解决movable-view拖拽组件问题

小程序社区: 解决movable-view拖拽组件问题

你可能感兴趣的:(小程序)