小程序常用的ui组件

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	是否采用衔接滑动