weui Picker 多列选择器

2018年06月04日 09:22 | 3240次浏览 作者原创 版权保护

章节我们来介绍微信weui反馈组件中的Picker多列选择器(需要配合js实现),Picker多列选择器组件效果使用了jquery,所以案例依赖于jquery库大家注意。按照下面的步骤就可以做出网页效果,案例中引用的微信weui的css样式库我已经上传到百度网盘了,地址 http://pan.baidu.com/s/1cvQlLc  ,大家可以下载下来进行引用,当然你也可以引用网络地址,但是有个弊端,微信weui的样式库更新比较频繁,可能将来某一天会失效,所以最好下载到本地使用。

一、引入css文件

<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">

记得html设置成移动手机端浏览

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">


二、 引入jquery库依赖

由于本节weui Picker多列选择器需要js操作,按照官方文档的方法依赖于jquery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>


三、引入微信官方js库

<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>


四、Picker多列选择器html代码

在<body></body>之间添加如下代码

<div class="page picker js_show">
    <div class="page__hd">
        <h1 class="page__title">Picker</h1>
        <p class="page__desc">多列选择器,需要配合js实现--V型知识库www.vxzsk.com</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>


五、picker多列选择器js操作实现

<script type="text/javascript" class="picker js_show">
    $('#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);
            }
        });
    });
    $('#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>


六、效果

打开谷歌浏览器,设置手机网页模式浏览案例网页


七、完整html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>www.vxzsk.comV型知识库</title>
 </head>
 <link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
 

    

 <body>

<div class="page picker js_show">
    <div class="page__hd">
        <h1 class="page__title">Picker</h1>
        <p class="page__desc">多列选择器,需要配合js实现--V型知识库www.vxzsk.com</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>


 </body>

<script type="text/javascript" class="picker js_show">
    $('#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);
            }
        });
    });
    $('#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>
</html>


如果读者想直接浏览效果,可新建个html页面,把上述的完整代码复制进去即可。


此文章本站原创,地址 https://www.vxzsk.com/1033.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程