小程序之常见内置组件

最新推荐文章于 2026-05-24 13:44:23 发布

原创最新推荐文章于 2026-05-24 13:44:23 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

微信小程序专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了小程序中几个主要的内置组件，包括Text组件、Button组件、View组件、Image组件和Input组件，以及Scroll-view组件。Text组件允许用户选择文本，Button组件提供了不同尺寸和类型的选择，Image组件支持图片显示和模式设置，Input组件用于用户输入，Scroll-view组件则实现了局部滚动功能，各个组件都有其特定的属性和用法。同时，文中提到了一些通用属性的应用。

文章目录

Text组件

Text组件用于显示文本, 类似于span标签, 是行内元素
selectable属性决定文本内容是否可以让用户选中（长按会被选中可以进行复制等操作）
◼ space有三个取值(见下图)
◼ decode是否解码（若为false便会原样输出）

decode可以解析的有：&nbsp ; &lt ; &gt ; &amp ; & apos ; & ensp;

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

space的值：

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

Button组件

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	小尺寸，为button添加display：inline-block属性

type的合法值

值	说明
primary	button的背景色为绿色
default	button的背景色为白色
warn	button的背景色为红色

button组件演练

在这里插入图片描述

open-type的属性：

值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片返回小程序时可以从bindcontact回调中得到详细信息
share	触发用户转发
getPhoneumber	获取用户的电话，可以从bindgetphonenumber回调中得到信息
getUserInfo	获取用户的信息，可以从bindgetuserinfo回调中得到信息

view组件

视图组件（块级元素，独占一行，通常用作容器组件）

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式，若hover-class="none"时无点击态样式
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后保留点击态时间，单位毫秒

image组件

Image组件用于显示图片，有如下常见属性：

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
binderror	eventhandle		否	当发生错误时触发，event.detail = {errMsg}
bindload	evnethandle		否	当图片载入完毕时触发，event.detail = {height:width}

其中src可以是本地图片，也可以是网络图片
◼ Mode属性使用也非常关键，详情查看官网：
 关于组件的官方文档
◼ 注意：image组件默认宽度320px、高度240px（官方文档有错误）
有一个api可以选择图片上传：wx.chooseImage(可查看官方文档)

input组件

Input组件用于接收用户的输入信息，也是开发中非常常见的，有如下属性：
在这里插入图片描述

input组件的案例

在这里插入图片描述

scroll-view组件

scroll-view可以实现局部滚动，常见属性如下：

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
bindscrolltoupper	eventhandle		否	滚到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，eventdetail = {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

注意事项：
 实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了,若要写true或者false应该用双引号括起来，否则只会当成一个字符串处理，只要字符串不为空就会被转化为true–Boolean类型值）
 垂直方向滚动必须设置scroll-view一个高度