view - div
代替 原来的 div 标签
text文本
-
⽂本标签
-
只能嵌套text
-
⻓按⽂字可以复制(只有该标签有这个功能)
-
可以对空格 回⻋ 进⾏编码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectable | Boolean | false | ⽂本是否可选 |
decode | Boolean | false | 是否解码 |
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
image图⽚
-
图⽚标签,image组件默认宽度320px、⾼度240px
-
⽀持懒加载
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 图⽚资源地址 | |
mode | Boolean | scaleToFill | 图⽚裁剪、缩放的模式 |
lazy-load | Boolean | false | 图⽚懒加载 |
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满image 元素 |
缩放 | aspectFit | 保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。 |
缩放 | aspectFill | 保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来。 |
缩放 | widthFix | 宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变 |
裁剪 | top | 不缩放图⽚,只显⽰图⽚的顶部区域 |
裁剪 | bottom | 不缩放图⽚,只显⽰图⽚的底部区域 |
裁剪 | center | 不缩放图⽚,只显⽰图⽚的中间区域 |
裁剪 | left | 不缩放图⽚,只显⽰图⽚的左边区域 |
裁剪 | right | 不缩放图⽚,只显⽰图⽚的右边区域 |
裁剪 | top left | 不缩放图⽚,只显⽰图⽚的左上边区域 |
裁剪 | top right | 不缩放图⽚,只显⽰图⽚的右上边区域 |
裁剪 | bottom left | 不缩放图⽚,只显⽰图⽚的左下边区域 |
裁剪 | bottom right | 不缩放图⽚,只显⽰图⽚的右下边区域 |
swiper轮播图
默认宽度 100% ⾼度 150px
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | s是否循环轮播 |
swiper:滑块视图容器
swiper-item:滑块
默认宽度和⾼度都是100%
navigato导航
导航组件 类似超链接标签
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
target | String | self | 在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值 self/miniProgram |
url | String | 当前⼩程序内的跳转链接 | |
open-type | String | navigate | 跳转⽅式 |
open-type 有效值:
值 | 说明 |
---|---|
navigate | 保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯ |
redirect | 关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯。 |
switchTab | 跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯ |
reLaunch | 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯ |
navigateBack | 关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层 |
exit | 退出⼩程序,target= miniProgram 时⽣效 |
rich-text富文本
可以将字符串解析成 对应标签,类似 vue中 v–html 功能
// 1 index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text>
// index.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
nodes 属性⽀持 字符串 和 标签节点数组
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
name | 标签名 | string | 是 | ⽀持部分受信任的 HTML 节点 |
attrs | 属性 | object | 否 | ⽀持部分受信任的属性,遵循 Pascal 命名法 |
children | ⼦节点列表 | array | 否 | 结构和 nodes ⼀致 |
⽂本节点:type = text:必填,⽀持entities,string
-
nodes 不推荐使⽤ String 类型,性能会有所下降。
-
rich–text 组件内屏蔽所有节点的事件。
-
attrs 属性不⽀持 id ,⽀持 class 。
-
name 属性⼤⼩写不敏感。
-
如果使⽤了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
-
img 标签仅⽀持⽹络图⽚。
button按钮
<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
default
</button>
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
size | string | default | 否 | 按钮的⼤⼩ |
type | string | default | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空,背景⾊透明 |
disabled | boolean | false | 否 | 是否禁⽤ |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
form-type | string | 否 | ⽤于 组件,点击分别会触发 组件的 submit/reset 事件 | |
open-type | string | 否 | 微信开放能⼒ |
size 的合法值
值 | 说明 |
---|---|
default | 默认⼤⼩ |
mini | ⼩尺⼨ |
type 的合法值
值 | 说明 |
---|---|
primary | 绿⾊ |
default | ⽩⾊ |
warn | 红⾊ |
**form-type 的合法值 **
值 | 说明 |
---|---|
submit | 提交表单 |
reset | 重置表单 |
icon图标
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
size | number/string | 23 | 否 | icon的大小,单位默认为px,2.4.0起支持传入单位(rpx/px),2.21.3起支持传入其余单位(rem 等)。 |
color | string | 否 | icon的颜色,同css的color |
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view> <view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view> <view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
radio单选按钮
可以通过 color属性来修改颜色
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value | |
checked | boolean | false | 否 | 当前是否选中 |
disabled | boolean | false | 否 | 是否禁用 |
color | string | #09BB07 | 否 | radio的颜色,同css的color |
需要搭配 radio-group ⼀起使⽤
checkbox复选框
可以通过 color属性来修改颜色
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value | |
disabled | boolean | false | 否 | 是否禁用 |
checked | boolean | false | 否 | 当前是否选中,可用来设置默认选中 |
color | string | #09BB07 | 否 | checkbox的颜色,同css的color |
需要搭配 checkbox-group ⼀起使⽤