mui多层级选择器picker踩坑

最近用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后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值