weui之Picker的使用教程

最新推荐文章于 2026-04-21 13:17:35 发布

原创最新推荐文章于 2026-04-21 13:17:35 发布 · 5.2w 阅读

12 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

微信

19 篇文章

订阅专栏

本文解决了因Zepto.min.js文件加载位置不当导致的功能失效问题。通过调整该文件至<head>标签内，确保了后续JavaScript代码能够正确执行。

这个问题调试了很久，因为调用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>