微信小程序之基础组件篇——视图容器（七）

微信小程序之入门篇（一）
微信小程序之注册篇（二）
微信小程序之开发初体验（三）——开发工具使用和目录结构
微信小程序之生命周期（四）
微信小程序之数据绑定（五）
微信小程序之触控事件（六）
微信小程序之基础组件篇——视图容器（七）
微信小程序之基础组件篇——基础内容（八）
微信小程序之基础组件篇——表单组件（九）
微信小程序之基础组件篇——导航组件（十）
微信小程序之基础组件篇——媒体组件（十一）
微信小程序之API篇——豆瓣图书搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）

本篇文章将介绍小程序的基础组件——视图容器。

视图容器分为三大组件:

• view
• scroll-view——类似于滚动组件
• swiper——类似于图片轮播组件

view

首先介绍下view的基本属性。

属性名	类型	默认值	说明
hover	Boolean	false	是否启用点击态
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

然后作为一名粗暴的程序猿，一言不合就撸代码。。。

  flex-direction: row
  
    1
    2
    3
  


  flex-direction: column
  
    1
    2
    3
  

view组件效果

scroll-view

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: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

index.wxss
.scroll-view-item{
  height: 100px;
}



.scroll-view_H{
  white-space: nowrap;
  display: flex;
}

.scroll-view-item_H{
    height: 100px;
    width: 200px;
    display: inline-block;
}

#green{
  background: green;
}

#yellow{
  background: yellow;
}

#red{
  background: red;
}

#blue{
  background: blue;
}

scroll-view效果图

swiper

swiper组件说白了就是一个图片轮播组件。

swiper的基本属性

index.wxml




    
        
    
    
         
    
        
          
        

swiper效果图