一、需求：实现可以滑动的窗口

二、代码

.wxml

!-- 秒杀 --  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  !-- /秒杀 --

.wxss

.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;}

.js

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"    }]  }})

三、知识点总结

1. 若没有movable-area,则movable-view就是一个普通的视图容器，不会滑动，并且其在整个容器flex中的布局也会失效。
   效果如图：
   
2. movable-area style='width:auto'若不设置width，height则会根据movable-view的大小调整
3. movable-view的属性要直接在 movable-view animation scroll-x style='height:220rpx;width:1280rpx' direction='horizontal' inertia='true' out-of-bounds中设置，其中类型为布尔值的属性，可以不写布尔值只写属性名，例如movable-view inertia='true'即为movable-view inertia
   

参考博文：https://www.jianshu.com/p/0e75633a68ca