微信小程序：视图容器

view

把文档分割为独立的、不同的部分。
示例：

<!--一个块级区域--><view style="background: pink; height: 200px;"> block </view><!--一个行级区域--><view style="display: inline-block; background: red;"> inline1 </view><!--一个行级区域--><view style="display: inline-block; backgrondd: blue;"> inline2 </view>

view

view可以使用弹性和模型进行布局,可以设置style为：

style="display: flex;        flex-direction: row/column;        justify-content: center/flex-start/flex-end/space-between/space-around;       align-items: center/flex-start/flex-end;"

scroll-view

可滚动试图区域

属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时（单位px），触发scrolltoupper事件lower-thresholdNumber50距底部/右边多远时（单位px），触发scrolltolower事件scroll-topNumber
设置竖向滚动条位置scroll-leftNumber
设置横向滚动条位置scroll-into-viewString
值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部bindscrolltoupperEventHandle
滚动到顶部/左边，会触发scrolltoupper事件bindscrolltolowerEventHandle
滚动到底部/右边，会触发scrolltolower事件bindscrollEventHandle
滚动时触发，event.detail总携带{scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

使用竖向滚动条时要给scroll-view一个固定高度，拖更说wxss设置height。

示例：

<view class="section">    <view class="section__title">vertical scroll</view>    <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">        <view id="green" class="scroll-view-item bc_green"></view>        <view id="red"  class="scroll-view-item bc_red"></view>        <view id="yellow" class="scroll-view-item bc_yellow"></view>        <view id="blue" class="scroll-view-item bc_blue"></view>    </scroll-view>    <view class="btn-area">        <button size="mini" bindtap="tap">click me to scroll into view </button>        <button size="mini" bindtap="tapMove">click me to scroll</button>    </view></view><view class="section section_gap">    <view class="section__title">horizontal scroll</view>    <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">        <view id="green" class="scroll-view-item_H bc_green"></view>        <view id="red"  class="scroll-view-item_H bc_red"></view>        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>        <view id="blue" class="scroll-view-item_H bc_blue"></view>    </scroll-view></view>

.js:

var order = ['red', 'yellow', 'green', 'blue', 'red']Page({  data: {    toView: "red",    scrollTop: 100  },  upper: function(e) {    console.log(e)  },  lower: function(e) {    console.log(e)  },  scroll: function(e) {    console.log(e)  },  tap: function(e) {    for (var i = 0; i < order.length; ++i) {      if (order[i] === this.data.toView) {        this.setData({          toView: order[i + 1]        })        break      }    }  },  tapMove: function(e) {    this.setData({      scrollTop: this.data.scrollTop + 10    })  }})

.wxss

.section {  margin-bottom: 40px}.section_title {  margin-bottom: 8px;  padding-left: 15px;  padding-right: 15px}.scroll-view-item {  height: 200px;}.btn-area {  width: 100%;  height: 40px;}.section_gap {  padding: 0 15px}.scection_gap .section_title {  padding-left: 0;  padding-right: 0}.scroll-view_H {  white-space: nowrap}.scroll-view-item_H {  display: inline-block;  width: 100%;  height: 200px}.bc_red {  background: red;}.bc_green {  background: green;}.bc_yellow {  background: yellow;}.bc_blue {  background: blue;}

效果图（ps:不知道怎么给这个开发工具模拟器录屏 -_-）：

scroll-view

swiper

滑动面板

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点autoplayBooleanfalse是否自动切换currentNumber0当前所在页面的indexintervalNumber5000自动切换时间间隔durationNumber1000滑动动画时长bindchangeEventHandle
current改变时会触发change事件，event.detail={current:current}

注意：其中只可放置swiper-item组件，其他节点会被自动删除

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。
.wxml:

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for-items="{{imgUrls}}">    <swiper-item>      <image src="{{item}}" class="slide-image" width="355" height="150"/>    </swiper-item>  </block></swiper><button bindtap="changeIndicatorDots"> indicator-dots </button><button bindtap="changeAutoplay"> autoplay </button><slider bindchange="intervalChange" show-value min="500" max="2000"/> interval<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

.js:

Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: false,    autoplay: false,    interval: 5000,    duration: 1000  },  changeIndicatorDots: function(e) {    this.setData({      indicatorDots: !this.data.indicatorDots    })  },  changeAutoplay: function(e) {    this.setData({      autoplay: !this.data.autoplay    })  },  intervalChange: function(e) {    this.setData({      interval: e.detail.value    })  },  durationChange: function(e) {    this.setData({      duration: e.detail.value    })  }

swiper

swiper和scroll-view的区别：

1，scroll-view是连续平滑的滚动，视图停留在滑动动作离开的位置，swiper是自带分页效果，视图在滑动动作离开后，继续滑动值当前页。
2，swiper具备指示点。