美文网首页
小程序实现拖拽功能

小程序实现拖拽功能

作者: 编程小橙子 | 来源:发表于2019-08-24 19:37 被阅读0次
    timg.jpg
    小程序实现拖拽:movable-area和movable-view必须搭配使用才可以实现
    1.movable-area必须设置W和H,默认为10px
    2.movable-view小于movable-area时,movable-view的移动范围是在movable-area内
    3.direction一共有4个属性:all、vertical、horizontal、none
    4.inertia:movable-view是否带有惯性
    5.out-of-bounds:超过可移动区域是否可以还移动
    6.scale:是否支持双指缩放,默认缩放手势生效区域是在movable-view内
    详细属性:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
    

    先看图

    image.png
    <movable-area class="content-bg">
      <movable-view class='content-block' bindtap='add' direction="all">{{msg}}
        <image src='' class="imgStyle"></image>
      </movable-view>
    </movable-area>
    -------------------------------------------------
    .content-bg {
      pointer-events: none;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #aaa;
    }
    
    .content-bg>.content-block {
      pointer-events: auto;
      height: 50px;
      width: 50px;
      background:orangered;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
    }
    -------------------------------------------------
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        msg:'start',
        flag:false
      },
      // 触发点击事件时执行的操作
      add(){
        var flag = [this.data.flag]
        console.log(flag)
        if(flag == 'false'){
          this.setData({
            msg:'stop',
            flag:true
          })
        }else{
          this.setData({
            msg:'start',
            flag:false
          })
        }
      },
    })

    相关文章

      网友评论

          本文标题:小程序实现拖拽功能

          本文链接:https://www.haomeiwen.com/subject/hmwqectx.html