微信小程序_(組件)可拖動movable-view

 

 

　　微信小程序movable-view組件官方文檔　　傳送門

　　

 

　　Learn

　　　　1、moveable-view組件

 

 

1、movable-view組件

　　direction：movable-view的移動方向，屬性值有all、vertical、horizontal、none【默認值none】

　　使用<movable-view>組件時必須和<movable-area>組件一塊兒用，<movable-area>規定了可移動組件移動的範圍

 

<!--index.wxml-->
Cynical丶Gary
<movable-area class="father-size">

  <movable-view class='e size' direction="all">
  </movable-view>

</movable-area>

index.wxml

 

.container{
  display: flex;
  white-space: nowrap;
}

.size{
  width: 250rpx;
  height: 150rpx;
}

.father-size{
  width: 100%;
  height: 650rpx;
  background-color: grey;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}

index.css

 

　　inertia：movable-view是否帶有慣性【默認值爲false】

　　out-of-bounds：超過可移動區域後，movable-view是否還能夠移動【默認值爲false】

　　x：定義x軸方向的偏移，若是x的值不在可移動範圍內，會自動移動到可移動範圍；改變x的值會觸發動畫

　　y：定義y軸方向的偏移，若是y的值不在可移動範圍內，會自動移動到可移動範圍；改變y的值會觸發動畫

　　使用規則

<movable-area class="father-size">
  <movable-view class='e size' direction="all" 
  inertia="true"
  out-of-bounds="false"
  x="50"  y="120">
  </movable-view>
</movable-area>

 

　　damping：阻尼係數，用於控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快【默認值爲20】

　　friction：摩擦係數，用於控制慣性滑動的動畫，值越大摩擦力越大，滑動越快中止；必須大於0，不然會被設置成默認值【默認值爲2】

　　不方便測試出效果，使用規則同上

<movable-area class="father-size">
  <movable-view class='e size' direction="all" 
  inertia="true"
  out-of-bounds="false"
  x="50"  y="120"
  damping="10000" friction="60">
  </movable-view>
</movable-area>

 

　　bindchange：拖動過程當中觸發的事件，event.detail = {x: x, y: y, source: source}，其中source表示產生移動的緣由，值可爲touch（拖動）、touch-out-of-bounds（超出移動範圍）、out-of-bounds（超出移動範圍後的回彈）、friction（慣性）和空字符串（setData）

 　　在index.js中添加拖動事件doChange()，在index.wxml中幫定doChange()事件

  doChange:function(){
      console.log("拖動中~");
  }

 

 

<!--index.wxml-->
Cynical丶Gary
<movable-area class="father-size">
  <movable-view class='e size' direction="all" 
  inertia="true"
  out-of-bounds="false"
  x="50"  y="120"
  damping="10000" friction="60"
  bindchange="doChange">
  </movable-view>
</movable-area>

index.wxml

 

Page({
  data:{

  },
  doChange:function(){
      console.log("拖動中~");
  }

})

index.js