微信小程序：视图容器

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-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发scrolltoupper事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发scrolltolower事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发scrolltolower事件
bindscroll	EventHandle		滚动时触发，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-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的index
interval	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长
bindchange	EventHandle		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具备指示点。