标签：area 微信 movable 视图 100rpx width height view

• 本文简单使用视图容器movable-area和movable-view实现了简单的拖拽功能。
• 参考文档：
  movable-area
  movable-view

实现效果：

代码：

1. wxml

    <movable-area class="movable-area">
      <!-- 可以任意拖拽 -->
      <movable-view class="movable-view"
                    direction="all"
                    scale="true">
        <image class="movable-img" src="/images/aixin-red.png" bindtap="onRed"></image>
      </movable-view>
      <!-- 只能垂直拖拽 -->
      <movable-view class="movable-view aixin-blue"
                    direction="vertical"
                    scale="true">
        <image class="movable-img" src="/images/aixin-blue.png" bindtap="onBlue"></image>
      </movable-view>
    </movable-area>

2. wxss

    page{
      height: 100%;
    }
    .movable-area{
      height:100%;
      width: 100%;
      background: pink;
    }
    .movable-view{
      width: 100rpx;
      height: 100rpx;
    }
    .aixin-blue{
      margin-top:200rpx;
    }
    .movable-img{
      width: 100rpx;
      height: 100rpx;
    }

3. javascript

    Page({
      data: {
      },
      //点击红色爱心响应事件
      onRed(){
        wx.showToast({
          title: '点击了红色爱心',
          icon:"none"
        })
      },
      //点击蓝色爱心响应事件
      onBlue() {
        wx.showToast({
          title: '点击了蓝色爱心',
          icon: "none"
        })
      },
    })

标签：area,微信,movable,视图,100rpx,width,height,view
来源： https://www.cnblogs.com/xunxian/p/12950406.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。