< title > WeUI </ title > <!-- 必须 --> < meta name ="viewport" content ="width=device-width,initial-scale=1,user-scalable=0" > <!-- 引入css样式文件 --> < link rel ="stylesheet" type ="text/css" href ="https://cdn.bootcss.com/weui/1.1.2/style/weui.css" /> </ head > < div class ="page" > < div class ="page__hd" > < h1 class ="page__title" > Picker </ h1 > < p class ="page__desc" > 多列选择器，需要配合js实现 </ p > </ div > < div class ="page__bd page__bd_spacing" > < a href ="javascript:;" class ="weui-btn weui-btn_default" id ="showPicker" > 单列选择器 </ a > < a href ="javascript:;" class ="weui-btn weui-btn_default" id ="showDatePicker" > 日期选择器 </ a > </ div > </ div > <!-- 引入zepto,因为在后续的过程中会用到jq，zepto中集成了jq --> < script src ="https://cdn.bootcss.com/zepto/1.2.0/zepto.js" type ="text/javascript" charset ="utf-8" ></ script > <!-- 引入微信的两个js --> < script type ="text/javascript" src ="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></ script > <!-- weui.min.js有版本之分，在低版本的js中有些功能不完善，在高版本会支持 --> < script src ="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js" ></ script > <!-- <script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script> --> <!-- zepto必须在自己的js代码之前引入 --> < script type ="text/javascript" > $( ' #showPicker ' ).on( ' click ' , function () { weui.picker([{ label: ' 飞机票 ' , value: 0 label: ' 火车票 ' , value: 1 label: ' 的士票 ' , value: 2 label: ' 公交票 (disabled) ' , disabled: true , value: 3 label: ' 其他 ' , value: 4 }], { onChange: function (result) { console.log(result); onConfirm: function (result) { console.log(result); console.log(result); $( ' #showDatePicker ' ).on( ' click ' , function () { weui.datePicker({ start: 1990 , end: new Date().getFullYear(), onChange: function (result) { console.log(result); onConfirm: function (result) { console.log(result); </ script > </ body > </ html >