微信小程序視圖容器movable-area,小程序 movable area實例

2017-12-22

導(dǎo)讀：movable-area 基礎(chǔ)庫 1.2.0 開始支持，低版本需做兼容處理 movable-view 的可移動區(qū)域注意：movable-area 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px movable-view 基礎(chǔ)庫 1.2.0 開始支持，低版本需做...

movable-area

基礎(chǔ)庫 1.2.0 開始支持，低版本需做兼容處理

movable-view 的可移動區(qū)域

注意：movable-area 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px

movable-view

基礎(chǔ)庫 1.2.0 開始支持，低版本需做兼容處理

可移動的視圖容器，在頁面中可以拖拽滑動

屬性名	類型	默認(rèn)值	說明
direction	String	none	movable-view的移動方向，屬性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否帶有慣性
out-of-bounds	Boolean	false	超過可移動區(qū)域后，movable-view是否還可以移動
x	Number		定義x軸方向的偏移，如果x的值不在可移動范圍內(nèi)，會自動移動到可移動范圍；改變x的值會觸發(fā)動畫
y	Number		定義y軸方向的偏移，如果y的值不在可移動范圍內(nèi)，會自動移動到可移動范圍；改變y的值會觸發(fā)動畫
damping	Number	20	阻尼系數(shù)，用于控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快
friction	Number	2	摩擦系數(shù)，用于控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大于0，否則會被設(shè)置成默認(rèn)值

movable-view 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px

movable-view 默認(rèn)為絕對定位，top和left屬性為0px

當(dāng)movable-view小于movable-area時，movable-view的移動范圍是在movable-area內(nèi)；當(dāng)movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

注意：movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點，否則不能移動。

示例代碼：

<view class="section">
  <view class="section__title">movable-view區(qū)域小于movable-area</view>
  <movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view區(qū)域大于movable-area</view>
  <movable-area style="height: 100px;width: 100px;background: red;" direction="all">
    <movable-view style="height: 200px; width: 200px; background: blue;">
    </movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap: function(e) {
    this.setData({
      x: 30,
      y: 30
    });
  }
})

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個小商店