1.text文本(类似span)
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可选,除了text组件外,其他组件都无法长按选中 |
| space | String | false | 显示连续空格,可选值:ensp,emsp,nbsp |
| decode | Boolean | false | 是否解码,可解析 &\nbsp; &\lt; &\gt; &\amp; &\apos; &\ensp; &\emsp; |
ensp:把空格显示为一个英文的长度
emsp:把空格显示为一个汉字的长度
nbsp:把空格渲染为当前文字大小的一个长度
\是为了让解码的代码正常显示出来
rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
<\rich-text nodes="<h1 style='color:red">标题"</rich-text>
2.view视图容器(类似div)
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类,当hover-class='none'时,没有点击效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
button按钮 功能比HTML中的button按钮丰富 通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空,背景透明色 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带loading图标 |
input:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 输入框的初始内容 | |
| type | String | "text" | input的类型 |
| password | Boolean | false | 是否是密码类型 |
| placeholder | String | 输入框为空时占位符 | |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大输入长度,设置-1时不限制最大长度 |
navigator(类似a标签) 超链接
image图片(类似img)
- 常见属性:
- 1.src:支持本地和网络上的图片
- 2,.mode:指定图片裁剪 缩放的模式(13种模式 4种缩放模式 9种裁剪模式 见官方文档)
注意:image组件默认宽度300px,高度225px
与css相比 wxss扩展的特性有:
- 尺寸单位
- 样式导入
rpx:是微信小程序独有的,解决屏幕自适应的尺寸单位 px与rpx: 以iPhone6为例 iPhone6屏幕宽度为375px 共有750像素 则750px=375rpx=750物理像素 1rpx=0.5px=1物理像素
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空,背景透明色 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名称前是否带loading图标 |
input:
| 设备 | rox换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
|---|---|---|
| iphone5 | 1rpx=0.42px | 1px=2.34rpx |
| iphone6 | 1rpx=0.5px | 1px=2rpx |
| iphone6 Plus | 1rpx=0.552px | 1px=1.81rpx |
@import 样式导入 @import 'wxss样式表的相对路径';
scorll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
- scroll-y 允许纵向滚动
- scroll-x 允许横向滚动
swiper和swiper-item - 轮播图容器组件和轮播图item组件
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | boolean | false | 是否显示面板指示点 |
| indicator-color | color | rgba(0,0,0,.3 | 指示点颜色 |
| indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
| autoplay | Boolean | false | 是否自动切换 |
| interval | number | 50000 | 自动切换时间间隔 |
| circular | boolean | false | 是否采用衔接滑动 |