企业微信weui picker简单例子

1、引用js,css

 <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css">
<script language="javascript" type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="//res.wx.qq.com/open/libs/weuijs/1.1.0/weui.min.js"></script>

上面的1.1.0不要升级成1.2.0,不然样式会错乱,也不要使用1.0.0,有bug,在电脑端企业微信下不能滚动。

2、js代码,

示例1:

$('#showPicker').on('click', function () {
        weui.picker([{
            label: '飞机票',
            value: 0
        }, {
            label: '火车票',
            value: 1
        }, {
            label: '的士票',
            value: 2
        }, {
            label: '其他',
            value: 4
        }], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
            },
            title: '选择'
        });
    });

 示例2:

let showPerson = [];
        for (let i = 0; i < person.length; i++) {
            let item = { label: person[i].Value, value: person[i].Key };
            showPerson.push(item);
        }
        $('#drpPerson').on('click', function () {
            console.log('e');
            weui.picker(showPerson, {
                    onOpen: function (p) {
                        renderTxlBind();
                    },
                    onClose: function (p) {
                        if (p.length > 0) {
                            $("#drpPerson").html(p[0].label);
                            $("#drpPerson").attr("data-values", p[0].value);
                            renderTxlBind();
                        }
                    },
                    onChange: function (p) {
                        if (p.length>0) {
                            $("#drpPerson").html(p[0].label);
                            $("#drpPerson").attr("data-values", p[0].value);
                            renderTxlBind();
                        }
                    },
                title: '选择审核人'
            });
            renderTxlBind();
        });

 

posted @ 2020-06-23 10:46  zhaogaojian  阅读(1094)  评论(0编辑  收藏  举报