微信小程序的拖拽组件（滑动组件）movable-area

需求，实现下图功能：

GIF4.gif

代码：

<!-- 请忽略每个item的样式，只是为了区分item 没有别的用处 -->
    <movable-area style='width:auto'>
      <movable-view animation scroll-x style='height:220rpx;width:1120rpx' direction='horizontal' inertia='true' out-of-bounds>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#000;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#111;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#222;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#333;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#444;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#555;float:left'></view>
        <view style='width:160rpx;height:220rpx;display:inline-block;background-color:#666;float:left'></view>
      </movable-view>
    </movable-area>

官方文档：http://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

最终效果：

GIF5.gif

补充源码：

 <!-- 秒杀 -->
  <view class='u-wrp-secKill'>
    <view class='u-wrp-secKillHead'>
      <text class="u-txt-skTitle">京东秒杀</text>
      <text class="u-txt-sktime">18点场</text>
    </view>
    <movable-area style='width:auto'>
      <movable-view animation scroll-x style='height:220rpx;width:1280rpx' direction='horizontal' inertia='true' out-of-bounds>
      <block wx:for='{{skItems}}'>
        <view class='u-img-skimgs'>
          <image src='{{item.pic}}' class='u-img-skimgItem'></image>
          <text class='u-txt-sktxtItem1'>{{item.pNew}}</text>
          <text class='u-txt-sktxtItem2'>{{item.pOld}}</text>
        </view>
      </block>
      </movable-view>
    </movable-area>
  </view>
  <!-- /秒杀 -->

.u-wrp-secKill {
  display: block;
  position: relative;
  margin-top: 10rpx;
  width: 100vw;
  height: 280rpx;
  background: #fff;
}

.u-wrp-secKillHead {
  display: block;
  position: relative;
  width: inherit;
  height: 60rpx;
  border-bottom: 1px solid #f0f0f0;
}

.u-txt-skTitle {
  line-height: 60rpx;
  font-size: 28rpx;
  color: #f00;
  padding: 0 20rpx;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.u-txt-sktime {
  line-height: 60rpx;
  font-size: 24rpx;
  color: #333;
  padding: 0 20rpx;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.u-img-skimgs {
  width: 160rpx;
  height: 220rpx;
  display: inline-block;
  background-color: #fff;
  float: left;
  text-align: center;
}

.u-img-skimgItem {
  width:140rpx;height:140rpx;
}

.u-txt-sktxtItem1 {
  display:block;color:#f00;font-size:24rpx;
}

.u-txt-sktxtItem2 {
  display:block;color:#999;font-size:24rpx;text-decoration:line-through;
}

Page({
  data: {
    "skItems": [{
      "pic": "img/seckill/01.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/02.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/03.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/04.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/05.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/06.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/07.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/08.jpg",
      "pOld": "999",
      "pNew": "666"
    }]
  }
})