weuiの中のpickerはjsを使って動的バインディングデータの問題を行います。
ソリューションpickerとSelectのコンポーネントはinputラベルでバインディングされています。最初にinputの親レベルの要素でinputタグを除去し、inputラベルを新たに挿入し、最後にpickerまたはSelectコンポーネントを初期化します。
この問題は長い間調整しましたが、example.jsを呼び出した時は大丈夫ですので、移動したら無効になります。一度は怪しいと思いました。
何度もテストした結果、zepo.min.jsの順序が間違っていました。頭に置くべきです。
完全なコード:
以上は小编が皆さんに绍介したweuiの中のpickerがjsを使って动态的にデータを缚り付けています。皆さんに助けを求めています。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
<div class="weui-cell">
<div class="weui-cell__hd"><label for="time-format" class="weui-label"> </label></div>
<div class="weui-cell__bd">
<input class="weui-input " id="appl_sex" name="appl_sex" type="text" value="">
</div>
</div>
<div id="box">
<input type="text" id='camera' value=" "/>
</div>
$("#appl_sex").picker({
title: " ",
cols: [
{
textAlign: 'center',
values: ["1",'2']
}
],
onChange: function(p, v, dv) {
console.log(p, v, dv);
},
onClose: function(p, v, d) {
console.log("close");
}
});
$('#appl_sex').change(function () {
/* , , */
var val = $("#appl_sex").val();
if (val == "1") {
$("#box").empty();
$("#box").html("<input type='text' id='camera' value=' '/>");
$("#camera").picker({
title: " ",
cols: [
{
textAlign: 'center',
values: [' ']
}
]
});
} else {
$("#box").empty();
$("#box").html("<input type='text' id='camera' value=' '/>");
$("#camera").picker({
title: " ",
cols: [
{
textAlign: 'center',
values: [' ', ' ', ' + ']
}
]
});
}
});この問題は長い間調整しましたが、example.jsを呼び出した時は大丈夫ですので、移動したら無効になります。一度は怪しいと思いました。
何度もテストした結果、zepo.min.jsの順序が間違っていました。頭に置くべきです。
完全なコード:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="./weui.css"/>
<script src="./zepto.min.js"></script>
</head>
<body ontouchstart>
<div class="page">
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker"> </a>
</div>
</div>
<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);
}
});
});
</script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="./weui.min.js"></script>
</body>
</html>以上は小编が皆さんに绍介したweuiの中のpickerがjsを使って动态的にデータを缚り付けています。皆さんに助けを求めています。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。