button(按钮)
type
是用来控制按钮类型的 有三种:primary default warn
hover-class
按钮被按下后的效果
其余属性见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html
<button type="primary" plain>按钮</button>
checkbox(多选)
<checkbox checked value="1" color="red">大米</checkbox>
<checkbox checked value="2" color="blue">红豆</checkbox>
<checkbox checked value="0">黑米</checkbox>
input(输入框)
同html中的input
官方文档:
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
<input type="text" placeholder="请输入文字"/>
form(表单)
表单,将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type
为 submit
的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
<view class="container">
<view class="page-body">
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch"/>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label><radio value="radio1"/>选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>选项一</label>
<label><checkbox value="checkbox2"/>选项二</label>
</checkbox-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value ></slider>
</view>
<view class="page-section">
<view class="page-section-title">input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd" style="margin: 30rpx 0" >
<input class="weui-input" name="input" placeholder="这是一个输入框" />
</view>
</view>
</view>
</view>
<view class="btn-area">
<button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
<button style="margin: 30rpx 0" formType="reset">Reset</button>
</view>
</form>
</view>