前言
展示效果
檔案說明
檔案**
json檔案
"usingcomponents": ,
元件**
license-plate.js
// component/license-plate/license-plate.js
component(,
/*** 元件的方法列表
*/methods: )
},loadkeyboard:function(e,tab))
}else)
}this.data.tabindex=tab
},// 輸入市
inputcity:function(e))
},// 輸入車牌
inputlicense:function(e))
}else if(this.data.tabindex=='1'&&this.data.currentfocus!=8))
}else
}backspace:function())
this.triggerevent('backspace',this.data.currentfocus)
}else if(this.data.currentfocus==2))
this.triggerevent('backspace',this.data.currentfocus)
}else if(this.data.currentfocus==1))
this.triggerevent('backspace',this.data.currentfocus)
}else
},closekeyboard:function()}})
license-plate.wxml
取消確定}}
}}}}
}}}}
}}license-plate.wxss
.keyboard
.top-part
.font30
.font36
.fontblue
.fontgrey
.middle-part
.key-class
.key-class2
.backspace
頁面**
input-license.js
// pages/component/input-license/input-license.js
page(, , , , , , ],
currentfocus: 0,
isfocus: false,
showkeyboard: false,
license_color: '0',
license_plate: ''
},/**
* 生命週期函式--監聽頁面載入
*/onload: function (options) )
},// 輸入城市
inputcity: function (e) )
},//輸入車牌
inputlicense: function (e) )
},// 退格
backspace: function (e) )
},closekeyboard: function () )
},openkeyboard: function () )
this.keyboard = this.selectcomponent("#keyboard");
this.keyboard.loadkeyboard(this.data.currentfocus, this.data.tabindex)
},// 切換車牌
changetab: function (e) )
if (e.currenttarget.dataset.index == '1') , , , , , , , ]
})this.data.license_color = '4'
}else , , , , , , ]
})this.data.license_color = '0'}},
})input-license.wxml
選擇車牌型別
請輸入需要辦理車輛的車牌號
}input-license.wxss
.top-part
.middle-part
.middle-part .middle-item
.choosetype
.type-item
.license
.edit-text
.cursor
.friendlyalert
.colorg
.tips{
color: #91959c;
font-size: 22rpx;
微信小程式 switch元件實現
紅色switch元件 綠色switch元件 綠色禁用switch元件 藍色switch元件 開 藍色switch元件 關 switch list fui switch fui switch checked fui switch after,fui switch before fui switch b...
微信小程式元件
class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...
微信小程式 元件
官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...