weui的picker动态(defaultValue)设置选中一列或者多列

上一篇中写了如何使用weui的picker自定义生成省市区三级联动,在后续项目开发中有一个需求需要根据之前已经选好的省市区唤醒一个picker然后默认选中之前的选项,后来在多次测试之后picker初始化中的defaultValue属性只会生效一次。然后又读了一番源码。

先说解决方案:picker初始化时,传入一个动态的不重复的id,时间戳自然是最合适的选择:

weui.picker(items, {
                            id: new Date().valueOf()
                        });

这样每次生成picker都会出现一个新的id,自然每次defaultValue都会第一次生效。

但是为什么defaultValue只会生效一次?这个可以在源码中的picker方法中找到答案:

        // 获取缓存
        temp[defaults.id] = temp[defaults.id] || [];
        var result = [];
        var lineTemp = temp[defaults.id];
        var $picker = (0, _util2.default)(_util2.default.render(_picker2.default, defaults));
        var depth = options.depth || (isMulti ? items.length : util.depthOf(items[0])),
            groups = '';

if (lineTemp[level] === undefined && defaults.defaultValue && defaults.defaultValue[level] !== undefined) {
                // 没有缓存选项,而且存在defaultValue
                var defaultVal = defaults.defaultValue[level];
                var index = 0,
                    len = items.length;

                if (_typeof(items[index]) == 'object') {
                    for (; index < len; ++index) {
                        if (defaultVal == items[index].value) break;
                    }
                } else {
                    for (; index < len; ++index) {
                        if (defaultVal == items[index]) break;
                    }
                }
                if (index < len) {
                    lineTemp[level] = index;
                } else {
                    console.warn('Picker has not match defaultValue: ' + defaultVal);
                }
            }

 

可以看到在每次picker生成时,会使用当前将要生成的的picker的id尝试在weui自己的缓存中读取上次被选中的数组,且在展示时缓存的优先级要比defaultValue高,所以导致了defaultValue只会有效一次,因为第二次的时候picke使用了缓存作为默认值。但是查找缓存的时候使用的是id,所以每次picker的id都不相同,自然不会有缓存存在,也就能保证了defaultValue的动态选中值可以工作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值