view

---

视图容器。

示例：

          
       
        flex-direction: row
           
             
        
         1
              
        
         2
              
        
         3
            
         
      

列式排放：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

          
       
        vertical scroll
           
             
              
              
              
            
             
             
        click me to scroll into view       
        click me to scroll    
         
        
          
       
        horizontal scroll
           
             
              
              
              
            
         
      

 

 

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组件，其他节点会被自动删除