movable-view

movable-view

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

属性名	作用	默认值
direction	设置movable-view的移动方向	属性值有all、vertical、horizontal、none
inertia	movable-view是否带有惯性	true/false 默认是false
out-of-bounds	超过可移动区域后，movable-view是否还可以移动	true/false 默认是false
x	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	number
y	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画	number
damping	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	number 默认是20
friction	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	number默认是2
bindchange	拖动过程中触发的事件， = {x, y, source}

• 例子：

<view class='title-line'>movable</view>

<movable-area class="moveArea">
  <movable-view class='moveView' 
                x="{{x}}" 
                y="{{y}}" 
                damping="40" 
                direction="all" 
                style="color:#fff;font-size:12px;"
                inertia='true'>菜单
  </movable-view>
</movable-area>

<button class='button' type='primary' size='mini' bindtap='moveView'>点我随机滚动小方块</button>
<button class='button' type='primary' size='mini' bindtap='stopMove'>点我停止随机滚动</button>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

.moveArea {
  height: 400px;
  width:200px;
  background: pink;
  margin: 10px;
}
.moveView {
  height: 100rpx;
  width: 100rpx;
  line-height: 100rpx;
  background: skyblue;
  border-radius: 50%;
  text-align: center;
  margin: 10rpx;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Page({
  data: {
    // 微信小程序可移动的菜单
    x: 0,
    y: 0,
    isStop: false,
  moveView: function (e) {
    var that = this;
    setTimeout(function () {
      that.move(that);
    }, 1000);
  },
  stopMove: function (e) {
    this.setData({
      isStop: true
    })
  },
  move: function (that) {
    var randowX = that.GetRandomNum(1, 200);
    var randowY = that.GetRandomNum(1, 400);
    that.setData({
      x: randowX,
      y: randowY,
    })
    if (!that.data.isStop) {
      setTimeout(function () {
        that.move(that);
      }, 100);
    }
  },
  //随机函数
  GetRandomNum: function (Min, Max) {
    var Range = Max - Min;
    var Rand = Math.random();
    return (Min + Math.round(Rand * Range));
  }, 
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37