zoukankan      html  css  js  c++  java
  • 企业微信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();
            });
  • 相关阅读:
    IOI2000 回文字串
    洛谷 P2758 编辑距离
    NOIP2012普及第三题 摆花
    [SCOI2005]骑士精神
    [USACO1.5]八皇后 Checker Challenge
    Codeforces Round #637 (Div. 2) 题解
    核电站---两种DP解法
    POJ1077 八数码问题
    洛谷 P1162 填涂颜色
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/13180828.html
Copyright © 2011-2022 走看看