精华内容
下载资源
问答
  • 主要介绍了weui中的picker使用js进行动态绑定数据问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 关于使用jquery weuipicker部分遇到的问题及解决办法 本人在使用jquery weui制作app项目时,遇到[picker][6]部分,按钮点击触发事件时发生的问题,在这里把它记录下来,希望大家在遇到类似情况时能有一个好的...

    关于使用jquery weui的picker部分遇到的问题及解决办法

    本人在使用jquery weui制作app项目时,遇到[picker][6]部分,按钮点击触发事件时发生的问题,在这里把它记录下来,希望大家在遇到类似情况时能有一个好的解题思路:


    [发生问题的情况][6]

    jquery weui引入

    <link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/css/jquery-weui.css"/>
    <link rel="stylesheet" type="text/css" href="http://jqweui.com/dist/lib/weui.min.css"/>
    <script src="http://jqweui.com/dist/lib/jquery-2.1.4.js"></script>
    <script src="http://jqweui.com/dist/js/jquery-weui.js"></script>

    html部分

    <input type="button" class="btn select" onclick="select('clickOnce')" value="触发事件" />

    css部分

    .btn {padding:8px 24px;background-color:#f8f8f8;font-size:16px;color:#000}  

    js部分

        var name;
        function saveData(name){
            name = "本次点击所获取的name"+name;
            console.log(name);
        }
        function select(id){
            console.log(id);
            s = id;
            $('.select').select(
                {
                    title: "标题",
                    closeText: "完成",
                    items: [
                        {
                          title: "iPhone 3GS",
                          value: "001",
                        },
                        {
                          title: "iPhone 4GS",
                          value: "002",
                        },
                        {
                          title: "iPhone 5GS",
                          value: "003",
                        }
                    ],
                    onOpen: function(d){
                        console.log(this, d);
                    },
                    onChange: function(d){
                        console.log(this, d);
                        saveData(id);
                    },
                    onClose: function(d){
                        console.log(this, d);
                    }
                }
            )
        }

    问题产生

    当点击按钮时,需要同时触发两次事件,一次事件是行间的[onclick][6]事件,一次事件是[jquery weui][6]的[select][6]事件。但事实上,第一次点击这个按钮的时候只触发了[onclick][6]行间事件,而没有触发[jquery weui][6]的[select][6]事件;当第二次点击这个按钮的时候才会触发[jquery weui][6]的[select][6]事件;

    问题分析

    第一种情况
    类似冒泡事件(可能)
    第二种情况
    事件触发过程中未读取到select函数中内藏的[jquery weui][6]的[select][6]事件(很有可能)
    第三种情况
    js部分冲突(应该没可能)

    问题解决

    第一种情况
    类似冒泡事件(暂未想好验证办法)
    第二种情况
    事件触发过程中未读取到select函数中内藏的[jquery weui][6]的[select][6]事件(经验证,是这种情况引起的)
    第三种情况
    js部分冲突(不是这种情况)

    解题过程

        var name;
        var s;
        function saveData(name){
            name = "本次点击所获取的name"+name;
            console.log(name);
        }
        function select(id){
            console.log(id);
            s = id;
        }
        $('.select').select(
                {
                    title: "标题",
                    closeText: "完成",
                    items: [
                        {
                          title: "iPhone 3GS",
                          value: "001",
                        },
                        {
                          title: "iPhone 4GS",
                          value: "002",
                        },
                        {
                          title: "iPhone 5GS",
                          value: "003",
                        }
                    ],
                    onOpen: function(d){
                        console.log(this, d);
                    },
                    onChange: function(d){
                        console.log(this, d);
                        saveData(s);
                    },
                    onClose: function(d){
                        console.log(this, d);
                    }
                }
            )

    经验总结

    虽然这个问题看着很简单,但是在日常项目中还是有可能碰到的。当我遇到这个问题的时候查询相关资料时发现jquery weui的相关实践及问题处理方案还是很少的。在此,我想说的是,希望大家都能积极的把jquery weui在项目应用中所遇到的问题及时记录下来,这样大家都能在遇到类似问题的时候,有依据的解决问题,而不是无头苍蝇一样乱撞。

    展开全文
  • 实现weui中的picker联动,效果图如下: 代码如下 <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=...

    实现weui中的picker联动,效果图如下:

    在这里插入图片描述
    在这里插入图片描述

    代码如下

    <html lang="en"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
        <title>药店保修</title>
        <script src="./js/apiJs.js"></script> <link href="./css/weui.css" rel="stylesheet"> <link href="./css/example.css" rel="stylesheet"><script src="./config/config.js"></script><script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="./js/zepto.min.js"></script><script src="./js/example.js"></script><script src="./js/vue.min.js"></script><script src="./js/axios.min.js"></script><script src="./js/weui.js"></script>
    <style class="mpa-style-fix SideFunctionPanel">.weui-desktop-online-faq__wrp{top:304px!important;bottom:none!important}.weui-desktop-online-faq__wrp .weui-desktop-online-faq__switch{width:38px!important}</style><style class="mpa-style-fix ImageGatherer">.FotorFrame{position:fixed!important}</style></head>
    <body ontouchstart="" style="background-color: #ededed;" mpa-version="6.9.2" mpa-extension-id="ibefaeehajgcpooopoegkifhgecigeeg">
    <div id="app" style="height: 100%; text-align: center;"><div class="weui-cell weui-cell_access weui-cell_select weui-cell_select-after"><div class="weui-cell__hd"><label class="weui-label">药店地址:</label></div> <div class="weui-cell__bd"></div></div></div>
    
    <script>
        //设置axios的公共属性
        axios.defaults.timeout = 5000;
        axios.defaults.baseURL = BASE_URL;
    
        //vue实例化
        var app = new Vue({
            el: "#app",
            data() {
                return {}
            },
            async created() {
    
            },
            methods: {
                checkPicker() {
                 let two = [{
                        label: '飞机票',
                        value: 0,
                        children: [
                            {
                                label: '飞机票二级',
                                value: 0,
                            }, {
                                label: '飞机票二2级',
                                value: 1,
                            }, {
                                label: '飞机票二级',
                                value: 3,
                            },
                        ]
                    }, {
                        label: '火车票',
                        value: 1,
                     children: [
                         {
                             label: '火车票二级',
                             value: 0,
                         }, {
                             label: '火车票二2级',
                             value: 1,
                         }, {
                             label: '火车票二级',
                             value: 3,
                         },
                     ]
                    }, {
                        label: '的士票',
                        value: 2
                    }, {
                        label: '公交票 (disabled)',
                        disabled: true,
                        value: 3
                    }, {
                        label: '其他',
                        value: 4
                    }];
                    weui.picker(two,{
                        onChange: function (result) {
                            console.log(result);
                        },
                        onConfirm: function (result) {
                            console.log(result);
                        },
                        title: '单列选择器'
                    });
                },
                redirectTo(url = "./wxPageConnect.html") {
                    window.open(url, "_self");
                },
                 setCities() {
            //此处手写几个层级关联关系数据源,具体的数据源根据开发环境指定
            var provinces = [{
                INDEXS: "010",
                NAME: "北京",
                PARENTID: "CN"
            }, {
                INDEXS: "120",
                NAME: "山东",
                PARENTID: "CN"
            }];
            var cities = [{
                INDEXS: "120183",
                NAME: "东营市",
                PARENTID: "120"
            }, {
                INDEXS: "120179",
                NAME: "济南市",
                PARENTID: "120"
            },
                {
                    INDEXS: "01043",
                    NAME: "北京市",
                    PARENTID: "010"
                }
            ];
            var districts = [{
                INDEXS: "010415",
                NAME: "朝阳区",
                PARENTID: "01043"
            }, {
                INDEXS: "010423",
                NAME: "昌平区",
                PARENTID: "01043"
            },
                {
                    INDEXS: "1201657",
                    NAME: "东营区东城",
                    PARENTID: "120183"
                }, {
                    INDEXS: "1000380",
                    NAME: "东营区西城",
                    PARENTID: "120183"
                },
                {
                    INDEXS: "1201625",
                    NAME: "槐荫区",
                    PARENTID: "120179"
                }, {
                    INDEXS: "1201627",
                    NAME: "历城区",
                    PARENTID: "120179"
                }
            ];
    
            //根据数据源进行数据关联绑定
            city_selects = [];
            $.each(provinces, function(i) {
                var level1 = {
                    label: provinces[i].NAME,
                    value: provinces[i].INDEXS,
                    children: []
                };
                $.each(cities, function(j) {
                    if(provinces[i].INDEXS == cities[j].PARENTID) {
                        var level2 = {
                            label: cities[j].NAME,
                            value: cities[j].INDEXS,
                            children: []
                        };
                        $.each(districts, function(x) {
                            if(cities[j].INDEXS == districts[x].PARENTID) {
                                var level3 = {
                                    label: districts[x].NAME,
                                    value: districts[x].INDEXS
                                };
                                level2.children.push(level3);
                            }
                        });
                        level1.children.push(level2);
                    }
                });
                city_selects.push(level1);
            });
            return city_selects;
        }
            }
        })
    </script>
    
    <div class="mpa-sc article-gatherer new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-article-gatherer"></div><div class="mpa-sc image-gatherer new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-image-gatherer"></div><div class="mpa-sc page-clipper new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-page-clipper"></div><div class="mpa-sc global-search new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-global-search"></div><div class="mpa-sc text-gatherer new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-text-gatherer"></div><div class="mpa-sc video-gatherer new mpa-rootsc" data-z="100" style="display: block;" id="mpa-rootsc-video-gatherer"></div><div class="mpa-sc side-function-panel new mpa-rootsc" data-z="110" style="display: block;" id="mpa-rootsc-side-function-panel"></div><div class="mpa-sc notifier new mpa-rootsc" data-z="120" style="display: block;" id="mpa-rootsc-notifier"></div><div class="mpa-sc notification-manager new mpa-rootsc" data-z="130" style="display: block;" id="mpa-rootsc-notification-manager"></div><div id="SL_balloon_obj" alt="0" style="display: block;"><div id="SL_button" class="SL_ImTranslatorLogo" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/imtranslator-s.png&quot;); display: none;"></div><div id="SL_shadow_translation_result2" style="display: none;"></div><div id="SL_shadow_translator" style="left: -10000px; top: -10000px; display: none;"><div id="SL_planshet"><div id="SL_arrow_up" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/up.png&quot;);"></div><div id="SL_Bproviders"><div class="SL_BL_LABLE_ON" title="Google" id="SL_P0"><div id="SL_PN0">G</div></div><div class="SL_BL_LABLE_ON" title="Microsoft" id="SL_P1"><div id="SL_PN1">M</div></div><div class="SL_BL_LABLE_ON" title="Translator" id="SL_P2"><div id="SL_PN2">T</div></div><div class="SL_BL_LABLE_ON" title="Yandex" id="SL_P3"><div id="SL_PN3">Y</div></div></div><div id="SL_alert_bbl" style="display: none;"><div id="SLHKclose" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/delete.png&quot;);"></div><div id="SL_alert_cont"></div></div><div id="SL_TB"><table id="SL_tables" cellspacing="1"><tr><td class="SL_td" width="10%" align="right"><input id="SL_locer" type="checkbox" title="锁定语言"></td><td class="SL_td" width="20%" align="left"><select id="SL_lng_from" class="SL_lngs"><option value="auto">检测语言</option><option value="eo">世界语</option><option value="zh-CN">中文简体</option><option value="zh-TW">中文繁体</option><option value="da">丹麦语</option><option value="uk">乌克兰语</option><option value="uz">乌兹别克语</option><option value="ur">乌尔都语</option><option value="hy">亚美尼亚语</option><option value="ig">伊博语</option><option value="ru">俄语</option><option value="bg">保加利亚语</option><option value="sd">信德语</option><option value="sn">修纳语</option><option value="si">僧伽罗语</option><option value="hr">克罗地亚语</option><option value="is">冰岛语</option><option value="gl">加利西亚语</option><option value="ca">加泰罗尼亚语</option><option value="hu">匈牙利语</option><option value="zu">南非祖鲁语</option><option value="kn">卡纳达语</option><option value="lb">卢森堡语</option><option value="hi">印地语</option><option value="su">印尼巽他语</option><option value="jw">印尼爪哇语</option><option value="id">印尼语</option><option value="gu">古吉拉特语</option><option value="ky">吉尔吉斯语</option><option value="kk">哈萨克语</option><option value="tr">土耳其语</option><option value="tg">塔吉克语</option><option value="sr">塞尔维亚语</option><option value="st">塞索托语</option><option value="haw">夏威夷语</option><option value="cy">威尔士语</option><option value="bn">孟加拉语</option><option value="ceb">宿务语</option><option value="ne">尼泊尔语</option><option value="eu">巴斯克语</option><option value="af">布尔语(南非荷兰语)</option><option value="iw">希伯来语</option><option value="el">希腊语</option><option value="ku">库尔德语</option><option value="fy">弗里西语</option><option value="de">德语</option><option value="it">意大利语</option><option value="yi">意第绪语</option><option value="la">拉丁语</option><option value="lv">拉脱维亚语</option><option value="no">挪威语</option><option value="cs">捷克语</option><option value="sk">斯洛伐克语</option><option value="sl">斯洛文尼亚语</option><option value="sw">斯瓦希里语</option><option value="pa">旁遮普语</option><option value="ja">日语</option><option value="ps">普什图语</option><option value="ka">格鲁吉亚语</option><option value="mi">毛利语</option><option value="fr">法语</option><option value="pl">波兰语</option><option value="bs">波斯尼亚语</option><option value="fa">波斯语</option><option value="te">泰卢固语</option><option value="ta">泰米尔语</option><option value="th">泰语</option><option value="ht">海地克里奥尔语</option><option value="ga">爱尔兰语</option><option value="et">爱沙尼亚语</option><option value="sv">瑞典语</option><option value="be">白俄罗斯语</option><option value="xh">科萨</option><option value="co">科西嘉语</option><option value="lt">立陶宛语</option><option value="so">索马里语</option><option value="yo">约鲁巴语</option><option value="my">缅甸语</option><option value="ro">罗马尼亚语</option><option value="lo">老挝语</option><option value="fi">芬兰语</option><option value="gd">苏格兰盖尔语</option><option value="hmn">苗语</option><option value="en">英语</option><option value="nl">荷兰语</option><option value="tl">菲律宾语</option><option value="sm">萨摩亚语</option><option value="pt">葡萄牙语</option><option value="mn">蒙古语</option><option value="es">西班牙语</option><option value="ha">豪萨语</option><option value="vi">越南语</option><option value="az">阿塞拜疆语</option><option value="am">阿姆哈拉语</option><option value="sq">阿尔巴尼亚语</option><option value="ar">阿拉伯语</option><option value="ko">韩语</option><option value="mk">马其顿语</option><option value="mg">马尔加什语</option><option value="mr">马拉地语</option><option value="ml">马拉雅拉姆语</option><option value="ms">马来语</option><option value="mt">马耳他语</option><option value="km">高棉语</option><option value="ny">齐切瓦语</option></select></td><td class="SL_td" width="3" align="center"><div id="SL_switch_b" title="切换语言" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/switchb.png&quot;);"></div></td><td class="SL_td" width="20%" align="left"><select id="SL_lng_to" class="SL_lngs"><option value="eo">世界语</option><option selected="selected" value="zh-CN">中文简体</option><option value="zh-TW">中文繁体</option><option value="da">丹麦语</option><option value="uk">乌克兰语</option><option value="uz">乌兹别克语</option><option value="ur">乌尔都语</option><option value="hy">亚美尼亚语</option><option value="ig">伊博语</option><option value="ru">俄语</option><option value="bg">保加利亚语</option><option value="sd">信德语</option><option value="sn">修纳语</option><option value="si">僧伽罗语</option><option value="hr">克罗地亚语</option><option value="is">冰岛语</option><option value="gl">加利西亚语</option><option value="ca">加泰罗尼亚语</option><option value="hu">匈牙利语</option><option value="zu">南非祖鲁语</option><option value="kn">卡纳达语</option><option value="lb">卢森堡语</option><option value="hi">印地语</option><option value="su">印尼巽他语</option><option value="jw">印尼爪哇语</option><option value="id">印尼语</option><option value="gu">古吉拉特语</option><option value="ky">吉尔吉斯语</option><option value="kk">哈萨克语</option><option value="tr">土耳其语</option><option value="tg">塔吉克语</option><option value="sr">塞尔维亚语</option><option value="st">塞索托语</option><option value="haw">夏威夷语</option><option value="cy">威尔士语</option><option value="bn">孟加拉语</option><option value="ceb">宿务语</option><option value="ne">尼泊尔语</option><option value="eu">巴斯克语</option><option value="af">布尔语(南非荷兰语)</option><option value="iw">希伯来语</option><option value="el">希腊语</option><option value="ku">库尔德语</option><option value="fy">弗里西语</option><option value="de">德语</option><option value="it">意大利语</option><option value="yi">意第绪语</option><option value="la">拉丁语</option><option value="lv">拉脱维亚语</option><option value="no">挪威语</option><option value="cs">捷克语</option><option value="sk">斯洛伐克语</option><option value="sl">斯洛文尼亚语</option><option value="sw">斯瓦希里语</option><option value="pa">旁遮普语</option><option value="ja">日语</option><option value="ps">普什图语</option><option value="ka">格鲁吉亚语</option><option value="mi">毛利语</option><option value="fr">法语</option><option value="pl">波兰语</option><option value="bs">波斯尼亚语</option><option value="fa">波斯语</option><option value="te">泰卢固语</option><option value="ta">泰米尔语</option><option value="th">泰语</option><option value="ht">海地克里奥尔语</option><option value="ga">爱尔兰语</option><option value="et">爱沙尼亚语</option><option value="sv">瑞典语</option><option value="be">白俄罗斯语</option><option value="xh">科萨</option><option value="co">科西嘉语</option><option value="lt">立陶宛语</option><option value="so">索马里语</option><option value="yo">约鲁巴语</option><option value="my">缅甸语</option><option value="ro">罗马尼亚语</option><option value="lo">老挝语</option><option value="fi">芬兰语</option><option value="gd">苏格兰盖尔语</option><option value="hmn">苗语</option><option value="en">英语</option><option value="nl">荷兰语</option><option value="tl">菲律宾语</option><option value="sm">萨摩亚语</option><option value="pt">葡萄牙语</option><option value="mn">蒙古语</option><option value="es">西班牙语</option><option value="ha">豪萨语</option><option value="vi">越南语</option><option value="az">阿塞拜疆语</option><option value="am">阿姆哈拉语</option><option value="sq">阿尔巴尼亚语</option><option value="ar">阿拉伯语</option><option value="ko">韩语</option><option value="mk">马其顿语</option><option value="mg">马尔加什语</option><option value="mr">马拉地语</option><option value="ml">马拉雅拉姆语</option><option value="ms">马来语</option><option value="mt">马耳他语</option><option value="km">高棉语</option><option value="ny">齐切瓦语</option></select></td><td class="SL_td" width="5%" align="center"> </td><td class="SL_td" width="8%" align="center"><div id="SL_TTS_voice" title="undefined" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/ttsvoice.png&quot;);"></div></td><td class="SL_td" width="8%" align="center"><div id="SL_copy" title="复制译文" class="SL_copy" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/copy.png&quot;);"></div></td><td class="SL_td" width="8%" align="center"><div id="SL_bbl_font_patch"></div><div id="SL_bbl_font" title="字体大小" class="SL_bbl_font" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/font.png&quot;);"></div></td><td class="SL_td" width="8%" align="center"><div id="SL_bbl_help" title="帮助" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/bhelp.png&quot;);"></div></td><td class="SL_td" width="15%" align="right"><div id="SL_pin" class="SL_pin_off" title="固定弹出窗口" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/pin-on.png&quot;);"></div></td></tr></table></div></div><div id="SL_shadow_translation_result" style="visibility: visible;"></div><div id="SL_loading" class="SL_loading" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/loading.gif&quot;);"></div><div id="SL_player2"></div><div id="SL_alert100">文本转语音功能仅限200个字符</div><div id="SL_Balloon_options" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/bg3.png&quot;) rgb(255, 255, 255);"><div id="SL_arrow_down" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/down.png&quot;);"></div><table id="SL_tbl_opt" width="100%"><tr><td class="SL_td" width="5%" align="center"><input id="SL_BBL_locer" type="checkbox" checked="1" title="显示翻译器的按钮 3 秒"></td><td class="SL_td" width="5%" align="left"><div id="SL_BBL_IMG" title="显示翻译器的按钮 3 秒" style="background: url(&quot;chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/img/util/bbl-logo.png&quot;);"></div></td><td class="SL_td" width="70%" align="center"><a href="chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/html/options/options.html?bbl" target="_blank" class="SL_options" title="显示选项">选项</a> : <a href="chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/html/options/options.html?hist" target="_blank" class="SL_options" title="翻译历史记录">历史</a> : <a href="chrome-extension://noaijdpnepcgjemiklgfkcfbkokogabh/content/html/options/options.html?feed" target="_blank" class="SL_options" title="反馈">反馈</a> : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" target="_blank" class="SL_options" title="作出一点点贡献">Donate</a></td><td class="SL_td" width="15%" align="right"><span id="SL_Balloon_Close" class="SL_options" title="关闭">关闭</span></td></tr></table></div></div></div><div class=""> <div class="weui-mask weui-animate-fade-in"></div> <div class="weui-half-screen-dialog weui-picker weui-animate-slide-up"> <div class="weui-half-screen-dialog__hd"> <div class="weui-half-screen-dialog__hd__side"> <button class="weui-icon-btn weui-icon-btn_close weui-picker__btn">关闭</button> </div> <div class="weui-half-screen-dialog__hd__main"> <strong class="weui-half-screen-dialog__title">单列选择器</strong> </div> </div> <div class="weui-half-screen-dialog__bd"> <div class="weui-picker__bd"><div class="weui-picker__group"> <div class="weui-picker__mask"></div> <div class="weui-picker__indicator"></div> <div class="weui-picker__content" style="transform: translate3d(0px, 48px, 0px);"><div class="weui-picker__item">飞机票</div><div class="weui-picker__item">火车票</div><div class="weui-picker__item">的士票</div><div class="weui-picker__item weui-picker__item_disabled">公交票 (disabled)</div><div class="weui-picker__item">其他</div></div> </div><div class="weui-picker__group" style="display: block;"> <div class="weui-picker__mask"></div> <div class="weui-picker__indicator"></div> <div class="weui-picker__content" style="transform: translate3d(0px, 48px, 0px);"><div class="weui-picker__item">火车票二级</div><div class="weui-picker__item">火车票二2级</div><div class="weui-picker__item">火车票二级</div></div> </div></div> </div> <div class="weui-half-screen-dialog__ft"> <a href="javascript:;" class="weui-btn weui-btn_primary weui-picker__btn" id="weui-picker-confirm" data-action="select">确定</a> </div> </div> </div></body></html>
    
    展开全文
  • jqweuipicker动态加载数据 jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件。 如果是动态加载数据的话,可以把加载方法写成一个方法,数据是加载后返回的再填充。但是有一个问题,前台要求的数据...
  • weuiPicker的使用教程

    万次阅读 2016-12-10 16:14:22
    这个问题调试了很久,因为调用example.js时没问题,一移开就失效,一度觉得很诡异。 经过多次测试,才发现,是zepto.min.js的次序放错了... WeUI 单列选择器 $('#showPicker').on('click', function

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


    展开全文
  • vue.js里想用weuipicker,也引入了weui.js,为什么报错weui is not defined?import weuiJs from '../weui-js/weui.js'export default {methods: {checkPicker: function () {weui.picker([{label: '飞机票',value...

    vue.js里想用weui的picker,也引入了weui.js,为什么报错weui is not defined?

    import weuiJs from '../weui-js/weui.js'

    export default {

    methods: {

    checkPicker: 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);

    }

    });

    }

    }

    }

    展开全文
  • 由于最近做的一个移动端项目需要使用到类似WeUI Picker组件的选择效果, 所以在这里来分析下 WeUI Picker的实现逻辑。(weui.js项目地址) 之前也做过类似的组件, 是基于iscroll实现的。单列滑动的效果还可以。至于多...
  • WEUI picker组件无法js动态改变选项

    千次阅读 2018-06-12 12:28:09
    功能需求 ...一般情况下,这个需求很简单,当选择设备号的时候js动态改变摄像头选项里面的值就可以了,但是WEUI picker和Select组件都不支持动态改变选项,只支持初始赋值。 解决方案 因为picker和Sel...
  • 1.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...WeUI&lt;/title&gt; &lt;!--必须--&gt; &lt;meta name="viewport" content=
  • WeUI picker 如何动态设置defaultValue

    千次阅读 2018-12-30 19:19:01
    WeUI picker 如何动态设置defaultValue 我这里做的是四色球的设计.每次点击随机生成一注,发行defaultValue不会自动变化,看到源码发行 他们使用了temp[option.id]缓存了上次的defaultValue,导致,动态设置default...
  • JQuery-weui city-picker动态加载数据

    千次阅读 2019-11-21 01:00:25
    JQuery-weui city-picker动态加载数据 JQuery-weui city-picker 加载三级菜单 页面代码: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="jquery....
  • 前言:由于最近做的一个移动端项目需要用到类似WeUI Picker组件的选择效果,所以下面来分析下WeUI Picker的实现逻辑。(weui.js项目地址) 之前也做过类似的组件,是基于iscroll实现的。单列滑动的效果还可以。至于...
  • 上一篇中写了如何使用weuipicker自定义生成省市区三级联动,在后续项目开发中有一个需求需要根据之前已经选好的省市区唤醒一个picker然后默认选中之前的选项,后来在多次测试之后picker初始化中的defaultValue属性...
  • 代码如下 $date 为官方选择数据json传值。具体格式请查看官方例子。 $("#trigger1").click(function () { weui.picker({!! $date !!}, { className: 'custom-classname', container: 'bod...
  • 最近做一个拼车小程序有一个需求:可以选择社区作为出发点,也可以输入出发点信息。 参考了一位大佬的帖子做了一个下拉选择框可手动输入的实例。 ...下面是我的代码: 样式我是用weui的样式...view class="weui-cell__...
  • 大神们帮忙看看这里为啥报错?是因为没引用JS文件?应该引用哪个JS啊?![图片说明](https://img-ask.csdn.net/upload/201705/19/1495168407_384810.png)
  • jqweuipicker动态加载数据

    千次阅读 2017-12-04 18:30:10
    weuipicker动态加载数据
  • weui.js实现手机端的city-picker; 官网没有提供城市数据,addrData.js提供了城市数据。
  • jQueryWEUI使用picker实现二级联动

    千次阅读 2019-10-08 09:18:00
    i++) { $("#date").picker({ title: "请选择日期", cols: [{ textAlign: 'center', values: res.data.date }], //点击完成或关闭picker获取时间段信息 onClose: function (picker) { console.log(picker) dataTime...
  • weui中的picker默认组件只有两个,一个默认的picker,只有一级可选项,一个datePicker可以实现年月日联动,但是好多自定义场景需要自定义多级联动。 如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。 ...
  • jQuery WeUI City-Picker Demo:http://www.jqweui.cn/extends#city-picker 官方的city-picker提供了两种样式: (1)省级-市级-区级 (2)省级-市级(不显示区级) 最近开发的应用有一个新的需求,由于是在...
  • 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官网 :点这里写这篇文章时,用的版本是1.2.1版本 $("#picker-name")....
  • weui多选组件

    2018-07-27 15:35:18
    weui多选组件,weui多选组件,weui多选组件,weui多选组件,weui多选组件
  • 单列选择器 时间选择器 日期选择器 js代码 data: { array: ['美国', '中国', '巴西', '日本'], index: 0, date: '2016-09-01', time: '12:01' }, bindPickerChange: ... console.log('picker发...
  • WEUI Picker不切换数据

    2018-12-26 22:16:00
    ).picker({ title: "请选择摄像头" , cols: [ { textAlign: 'center' , values: [ '前置摄像头' ] } ] }); } else { $( "#box").empty(); $("#box").html("前置摄像头'/>" ); $( "#camera" )....
  • 前言 ...弹出来 选择年月日的框之后,直接点击导航上的“返回” 按钮,picker 选框不消失,也就是弹出框不消失 weui.datePicker({ start: 1900, // 从今天开始 end: 2030, defaultVal...
  • 于是选择了weui库中的Picker组件 原始需求与默认Picker组件UI不一致 UI图中的选择框每行高度与weui picker默认的每行高度不一致。于是想要改变picker组件的rowHeight高度。在picker api中并没有提供设置rowHeight...
  • var date = new Date(); var month = date.getMonth()+1; //获取当前月份 var year=date.getFullYear(); //获取年份 ... $('#selectTime').picker({ toolbarTemplate:'<div class="toolbar">...
  • weuiPicker的使用-动态赋值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,167
精华内容 466
关键字:

pickerweui