当前位置：网站首页>[WeChat applet] One article to solve button, input, image components

[WeChat applet] One article to solve button, input, image components

2022-07-29 13:01:00 【web15286201346】

??观众老爷们好,here is the blog,上文我们讲解了小程序的视图容器组件和基础内容组件,而小程序还有一类常用的组件,就是表单组件.
??那么今天,就让牛牛带大家走进表单组件吧(ω).

第一个来介绍的就是button组件,我们可以发现它和HTML中的按钮标签同名,是的,该组件在WXML中也是充当按钮设置功能,不过,相比之下,button组件的功能可比后者多多了,下面我们来详细介绍一下,微信小程序给我们提供哪些button功能.

type属性,用来设置按钮的样式类型,目前有三个值,primary绿色,default白色,warn红色,我们可以从它们的值的意思理解它们表示什么,绿色是重要的,红色是警告,这两种颜色会给用户提示的效果,默认样式为白色
效果如下：

tip： 有的小伙伴可能会看到的样式有一些差别,这可能是你没有设置最新样式的版本,这时候我们需要到app.json文件进行设置

"style": "v2"

这样就是声明以最新样式显示

size属性,用来设置按钮的大小,默认为default,也就是正常大小,我们还可以选择迷你按钮,将size设置为mini
效果如下：
plain属性,是否镂空,背景色透明,默认值是default,但我们改为true时
效果如下：
loading属性,是否设置名称前带loading图标,一般会设置在用户发生点击事件后或者页面还在加载时,用JS对loading的属性值进行数据绑定并操作.
效果如下：
form-type属性,无默认值,该属性是用于form组件中,点击触发form组件的submit eset事件,当我们将属性值设置为submit触发提交表单事件,而reset则是重置表单事件.

button组件中还有很多强大的属性,比如open-type可以直接调用微信的开放能力,比如触发用户转发等等,感兴趣可以去了解一下

第二个要讲的是input组件,内容表述为输入框,该组件大致与HTML中的input标签相同,为原生组件,不过我们还是要注意该组件的用法

value属性,这个属性我们很熟悉,这里不多做阐述,就是来设置输入框的初始内容,一般对用户作为一个默认值,用户可能可以直接用,如性别,默认为男,需要注意的是,该属性在小程序中是必填属性
type属性,输入键盘的类型,当我们使用小程序表单提交东西时,会发现它弹出的键盘是不一样的,如正常的文字输入键盘,还有特殊的密码输入键盘,这些就是靠该属性实现的.属性值及说明如下表

属性值

说明

text

文本输入键盘

number

数字输入键盘

idcard

身份证输入键盘

safe-password

密码安全输入键盘

在功能上类似于HTML中的img标签,用来承载图片,不过在使用上,image多了几个微信提供的属性,在功能上更加多样,支持JPG、PNG、SVG、WEBP、GIF等格式,接下来我们就来说说这个组件有什么属性功能.

首先需要说一下image组件是有默认大小的,宽为300px,高为240px,这意味着即使你里面没有放图片,空图片,在没有改变其宽高的情况下,空图片是会占据一个宽300px高240px的空间的,如下所示.

<!-- html -->
<image></image>
<!-- css -->
image{
 	border: solid lightcoral 2px;
}

在这里插入图片描述

src属性,这个不用多说,与img标签的一样,指图片资源地址.
mode属性,这个是比较重要的属性,它设置了图片的裁剪、缩放模式,默认值是scaleToFill,称为缩放模式,也就是不保持纵横比缩放,将原图片的宽高拉伸到能完全填满image元素,该属性值容易出现图片变形,其他属性值如下.

属性值

说明

图

aspectFit

保持纵横比缩放图片,是图片的长边能完全显示,能完全显示图片,但短边image组件可能出现空白块

在这里插入图片描述