小程序五：组件之视图容器

view

---

视图容器。

示例：

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

列式排放：flex-direction:row;

行式排放：flex-direction:column;

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。

示例：

index.wxml

<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>

index.js

var order = ['red', 'yellow', 'blue', 'green', '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: "green"
        })
        break
      }
    }
    // this.setData({
    //   toView: "blue"
    // })
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

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

微信小程序视图容器：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 indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
<!--swiper-item只能包含一个节点再多会自动删除-->
 <swiper-item>
 <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
 </swiper-item>
 <swiper-item>
  <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
 </swiper-item>
 <swiper-item>
  <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" width="355" height="150"/>
 </swiper-item> 
</swiper>