不得不吐糟下 checkbox 默認樣式真是有點略醜！！！checkbox 組件為一個多選框被放到 checkbox-group 組中，並在 checkbox-group（只能包含checkbox）中設置監聽事件。
checkbox-group 監聽方法：
checkbox 多選屬性：
wxml
<!--checkbox-group 就是一個 checkbox 組 有個監聽事件 bindchange，監聽數據選中和取消--> <checkbox-group bindchange="listenCheckboxChange">
<!--這裡用 label 顯示內容，for 循環寫法 wx:for-items 默認 item 為每一項--> <label style="display: flex;" wx:for-items="{{items}}"> <!--value 值和默認選中狀態都是通過數據綁定在 js 中的-->
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label>
</checkbox-group>
js
Page({
/**
*/
data:{
items: [
{name: 'JAVA', value: 'Android', checked: 'true'},
{name: 'Object-C', value: 'IOS'},
{name: 'JSX', value: 'ReactNative'},
{name: 'JS', value: 'wechat'},
{name: 'Python', value: 'Web'}
]
},
/**
* 監聽 checkbox 事件
*/
listenCheckboxChange:function(e) {
console.log('當 checkbox-group 中的 checkbox 選中或者取消是我被調用');
//列印對象包含的詳細信息
console.log(e);
},
onLoad:function(options){
// 頁面初始化 options 為頁面跳轉所帶來的參數
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
}
})
form 表單組件 是提交 form 內的所有選中屬性的值，注意每個 form 表單內的組件都必須有 name 屬性指定否則提交不上去，button 中的 type 兩個submit，reset 屬性分別對應 form 的兩個事件
主要屬性：
wxml
<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" > <checkbox-group name="checkbox" bindchange="listenerCheckbox">
<label style="display: flex" wx:for-items="{{items}}">
<checkbox value="{{item.name}}"/>{{item.value}}
</label>
</checkbox-group>
<!--button formType 屬性兩個可選值 submit, reset 分別會觸發 form 的 submit，reser 事件 -->
<button formType="submit" type="primary">提交</button>
<button formType="reset" type="warn">重置</button> </form>
js
Page({
/**
*/
data:{
items: [
{name: 'JAVA', value: 'Android', checked: 'true'},
{name: 'Object-C', value: 'IOS'},
{name: 'JSX', value: 'ReactNative'},
{name: 'JS', value: 'wechat'},
{name: 'Python', value: 'Web'}
]
},
listenCheckboxChange: function() {
console.log(e.detail.value);
},
onLoad:function(options){
// 頁面初始化 options 為頁面跳轉所帶來的參數
}
})
input 輸入框使用的頻率也是比較高的。。。樣式的話自己外面包裹個 view 自己定義。input 屬性也不是很多，有需要自己慢慢測，嘗試
主要屬性：
wxml
<!--style 的優先級比 class 高會覆蓋和 class 相同屬性-->
<view style="margin-top: 40% ">
<input type="number" placeholder="請輸入帳號" placeholder-style="color: red" bindinput="listene
rPhoneInput" />
</view>
<view>
<input password="true" placeholder="請輸入密碼" placeholder-style="color: red" bindinput="liste
nerPasswordInput"/>
</view>
<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="prima ry" bindtap="listenerLogin">登錄</button>
js
Page({
/**
*/
data:{
phone: '',
password: '',
},
/**
*/
listenerPhoneInput: function(e) {
this.data.phone = e.detail.value;
},
/**
*/
listenerPasswordInput: function(e) {
this.data.password = e.detail.value;
},
/**
*/
listenerLogin: function() {
//列印收入帳號和密碼
console.log('手機號為: ', this.data.phone);
console.log('密碼為: ', this.data.password);
},
onLoad:function(options){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
wxss
.input{
padding-left: 10px;
height: 44px;
}
.inputView{
border: 2px solid red;
border-radius: 40px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
}