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

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>