weui之Picker的使用教程

最新推荐文章于 2024-09-21 16:46:41 发布

k7Cx7e

最新推荐文章于 2024-09-21 16:46:41 发布

阅读量5.2w

点赞数 8

分类专栏： js 微信

本文链接：https://blog.csdn.net/gdali/article/details/53559172

版权

js 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

微信

19 篇文章 0 订阅

订阅专栏

这个问题调试了很久，因为调用example.js时没问题，一移开就失效，一度觉得很诡异。

经过多次测试，才发现，是zepto.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>