mui多层级选择器picker踩坑

作者: 菜菜___ | 来源:发表于2019-05-05 22:15 被阅读6次

    最近用mui做项目,虽然号称最接近原生APP体验的高性能前端框架,但依然有bug,并且特别明显。
    做省市区三级联动选择器时,按照官方文档提供的方法设置picker的选中值,一种是通过setSelectedIndex()方法,另一种是setSelectedValue()方法,使用第一种通过索引的时候没有问题,但是第二种通过值来设定的时候设置无效。
    使用setSelectedIndex()方法设置如下:

    var picker = new mui.PopPicker();
    picker.setData([{
       value: "first",
       text: "第一项",
    }, {
       value: "second",
       text: "第一项"
    }, {
       value: "third",
       text: "第三项"
    }, {
       value: "fourth",
       text: "第四项"
    }, {
       value: "fifth",
       text: "第五项"
    }])
    picker.pickers[0].setSelectedIndex(4, 2000);
    

    使用setSelectedValue()方法设置如下:

    picker.pickers[0].setSelectedValue('fourth',200)
    

    如果是单级选择器这样设置是没有问题的,但是多级选择器在刚进入页面初始化的时候这样设置便只有第一级生效,第二级、第三级不生效,如下市、区是不生效的:

    // 设定省初始值  
    cityPicker.pickers[0].setSelectedValue("320000");  
    // 设定市初始值  
    cityPicker.pickers[1].setSelectedValue("320200");  
    // 设定区初始值  
    cityPicker.pickers[2].setSelectedValue("320205");  
    

    解决办法
    一:使用定时器

     setTimeout(function () {
            self.cityPicker.pickers[1].setSelectedValue(self.city);
            setTimeout(function () {
                self.cityPicker.pickers[2].setSelectedValue(self.district);
                console.log(self.cityPicker.getSelectedItems());
            });
        });
    

    二:修改源码
    对picker.js的代码进行修改。主要是修改了triggerChange部分的功能函数

    Picker.prototype.triggerChange = function(callback) {  
            var self = this;  
            var index = self.getSelectedIndex();  
            var item = self.items[index];  
    
            if(index != self.lastIndex) {  
                $.trigger(self.holder, 'change', {  
                    "index": index,  
                    "item": item  
                });  
            }  
            self.lastIndex = index;  
            typeof callback === 'function' && callback();  
        };  
    

    方法二参考链接,没有做验证,在此先记录下。

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流

    相关文章

      网友评论

        本文标题:mui多层级选择器picker踩坑

        本文链接:https://www.haomeiwen.com/subject/hfukoqtx.html