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