所需资料
button | 微信开放文档
组件使用
1.输入框使用(标准书写要求value必填)
1.1value---默认值
<view>
<label>骚气网名:</label>
<input value="" placeholder="请输入" class="input01" />
</view>
为什么要用label框起文字内容?
为了之后可以对其进行样式的增加/更改
1.2.1如何设置输入框边框
微信小程序中input(输入框)是没有边框的需要设置可以通过css样式
CSS 边框属性
属性 | 描述 |
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度。 |
border-radius | 设置圆角的边框。 |
我这里使用的是圆角边框
示例
index.wxss代码示例
.input01 {
/* 实线边框solid */
border-style: solid;
/* 圆角弧度radius */
border-radius: 25px;
/* 边框大小设置 */
border-width: 1px;
/* 输入框长度设置 */
width: 200px;
}
index.wxml代码示例
<input value="" placeholder="" class="input01" />
1.2.2placeholder---输入框为空时占位符(==输入框为空时提示)
1.3password---boolean类型 是否为密码类型显示 ture/false 是/否
<view>
<label>国防密码:</label>
<input value="" password="ture" placeholder="请输入" class="input01" />
</view>
2.1单选框redio 需要用到多个单选要套用redio-group
2.1.2 checked Boolean类型(判断类型)默认选中当前值 ture/false 是/否
<view>
<label>性别</label>
<radio-group>
<radio value="男" checked="ture">男</radio>
<radio>女</radio>
</radio-group>
</view>
演示示例
3.多选框checkbox
多个选项时使用一样要套用checkbox-group
<view>
<label>小秘密</label>
<checkbox-group>
<checkbox>奇迹暖暖</checkbox>
<checkbox>闪耀暖暖</checkbox>
</checkbox-group>
</view>