文章目录
今天问卷做完,结果经理说样式要和微信小程序的一样,我用原生的select默认样式和微信的完全不一样,故此采用weui,在用weui之前要导入所需要的文件
资源
资源下载地址
<!--引入css样式文件-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/>
<!--引入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.0.0/weui.min.js"></script>
<!--<script src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>-->
<!--zepto必须在自己的js代码之前引入-->
引入
在vue用的话import就行
使用picker
<div id="showPicker" @click="checkPicker">请选择</div>
handleWeixin(index) {
let {
questlist
} = this.msg
let item = questlist[index]
let {
options
} = item
console.log(item);
console.log(options);
let myarray = []
options.forEach((oitem, oindex) => {
oitem.checked = false
let a = {
label: oitem.storeName,
value: oindex
}
myarray.push(a)
})
let that = this
weui.picker(
myarray, {
onChange: function (result) {
console.log("change", result);
},
onConfirm: function (result) {
that.city = options[result[0]].storeName
options[result[0]].checked = true
that.dateList = options[result[0]].date
}
}
)
return
},
重点是,
上面的代码都是我处理的数据,具体格式为
数组便是选择列表的内容
label便是列表条目内容
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);
}
}
);
alert弹窗
weui.alert(`第${item.orderNum}题为必答题哦`)