mui日期选择器弹出两次的解决方法

今天在用mui做日期选择的时候,发现日期弹出窗口弹出两次,代码并无问题,后来测试发现js被调用了两次,DtPicker代码如下:

/*日期选择*/
        (function($) {
            $.init();
            var result = $('#result')[0];
            var btns = $('.btn');
            btns.each(function(i, btn) {
                btn.addEventListener('tap', function() {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁,将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    var picker = new $.DtPicker(options);
                    picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月,用法同年
                         * rs.d 日,用法同年
                         * rs.h 时,用法同年
                         * rs.i 分(minutes 的第二个字母),用法同年
                         */
                        result.innerText = ' ' + rs.text;
                        /* 
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源,释放后将将不能再操作组件
                         * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
                         * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
                         */
                        picker.dispose();
                    });
                }, false);
            });
        })(mui);

发现上述代码中new语句执行了两次,因为看到是为btn加了tap事件,所以想到是不是因为mui监听的tap和自己添加的tap冲突,于是禁用了mui的tap监听

mui.init({
        //禁用mui tap监听 否则点击生日选择会弹出两次
        gestureConfig:{
            tap:false
        }
    });

问题解决!(开心)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值