常用的视图容器类组件

1view

        普通视图区域

        类似于html中的div，是一个块级元素

        常用来实现页面的布局效果

  <view>
    我是view
  </view>

2.scroll-view

        可滚动的视图区域

        常用来实现滚动列表效果

<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

<swiper class="swiper-container" indicator-dots="true" indicator-color="pink" indicator-active-color="orange" autoplay interval="1000" circular="true">
  <swiper-item>
    <view class="item">item1</view>
  </swiper-item>
  <swiper-item>
    <view class="item">item2</view>
  </swiper-item>
  <swiper-item>
    <view class="item">item3</view>
  </swiper-item>
</swiper>

swiper组件常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

4.text 文本组件

        类似于 HTML 中的 span 标签，是一个行内元素

        通过 text 组件的 selectable 属性，实现长按选中文本内容的效果

5.rich-text 富文本组件

        支持把 HTML 字符串渲染为 WXML 结构

        通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构

6.button

        按钮组件

        功能比html中的button按钮丰富

        通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）

7.image

        图片组件

        image组件默认宽度约300px，高度约200px

        image的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下

mode 值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说， 可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说， 图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

8.navigator

        页面导航组件

        类似于html中的a标签