微信小程序03——常用组件

组件的共同属性

id     组件的唯一标识(整个页面唯一)
class   组件的样式类(在对应的wxss中定义的样式类)
style   组件的内联样式
hidden   组件是否显示
data-*   自定义属性(组件上触发事件时,会发送给事件处理函数)
bind*/catch*   组件的事件

 

text:文本

user-select 文本是否可选,该属性会使文本节点显示为inline-block行内块元素(长按可选中,默认为false)
space 显示连续空格
decode 是否解码(是否将特殊字符解码,默认值为false)

space的合法值

  • ensp  中文字符空格一半大小
  • emsp 中文字符空格大小
  • nbsp  根据字体设置的空格大小


注意:

  • decode可以解析   > < &   '  
  • text组件内只支持text嵌套

 

button:按钮

size     按钮的大小(default:默认大小,占满一行; mini:小尺寸)
type     按钮的样式类型(primary:绿色; default:白色; warn:红色)
plain     按钮是否镂空,背景色透明(默认值false)
disabled    是否禁用(默认值false)
hover-class   指定按钮按下去的样式类,当hover-class="none"时,没有点击效果

 

view:视图容器

view为块级元素,独占一行,通常用作容器组件

hover-class   指定按下去的样式类

 

image:图片

支持jpg、png、svg、webp、gif等格式

image组件可以写成单标签,也可以写成双标签

image组件是一个行内块级元素


src     图片资源地址
mode    图片裁剪、缩放的模式(默认值scaleToFill)
webp     默认不解析webp格式,只支持网络资源
lazy-load   图片懒加载,在即将进入一定范围时(上下三屏,手机屏幕在中间,即三个屏幕范围)才开始加载
show-menu-by-longpress   开启长按图片显示识别小程序码菜单
binderror   当错误发生时触发
bindload   当图片加载完毕时触发

mode的合法值
scaleToFill   不保持纵横比缩放图片,使图片宽高完全拉伸至填满image元素
aspectFit   保持纵横比缩放图片,使图片的长边能完全显示出来
aspectFill   保持纵横比缩放图片,只保证图片的短边能完全显示出来
top     裁剪模式,不缩放图片,只显示图片的顶部区域
bottom   裁剪模式,不缩放图片,只显示图片的底部区域
center   裁剪模式,不缩放图片,只显示图片的中间区域
left     裁剪模式,不缩放图片,只显示图片的左边区域
right   裁剪模式,不缩放图片,只显示图片的右边区域
top left   裁剪模式,不缩放图片,只显示图片的左上边区域
top right   裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left   裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right   裁剪模式,不缩放图片,只显示图片的右下边区域

 

注意:

  • image组件默认宽度为320px、高度240px
  • image组件中不支持二维码/小程序码图片长按识别,仅在wx.previewImage中支持长按识别

 

input:输入框

type       input的类型(text:web; number:数字; idcard:身份证; digit:带小数点的数字)
value       输入框的初始内容
password     是否是密码类型
placeholder   输入框为空时占位符
disabled     是否禁用
maxlength   最大输入长度,设置为-1的时候不限制最大长度(默认值140)
focus     获取焦点
confirm-type   设置键盘右下角的文字,仅在type="text"时生效(send:右下角按钮为发送; search:搜索; next:下一个; go:前往; done:完成
adjust-position   键盘弹起时,是否自动上推页面

注意:
confirm-type的最终表现与手机输入法本身的实现有关,部分安卓系统可能不支持
input组件是原生组件,字体是系统字体,无法设置font-family

 

scroll-view:可滚动视图区域

页面滚动并不需要scroll-view,通常用来实现局部滚动

使用竖向滚动时,需要给scroll-view一个固定高度,通过wxss设置height

scroll-x   允许横行滚动
scroll-y   允许纵向滚动

 

微信小程序03——常用组件

上一篇:Java 字符串格式化和工具类使用


下一篇:win11系统防火墙怎么关闭