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();
            });
  • 相关阅读:
    2019.03.20 mvt,Django分页
    2019.03.18 连接my sql
    第三方包
    飞机大战完结篇
    Python复习基础篇
    final、权限、内部类
    接口、多态
    继承、super、this、抽象类
    String类、static、Arrays类、Math类
    Scanner类、Random类、ArrayList类
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/13180828.html
Copyright © 2011-2022 走看看