上一篇中写了如何使用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的动态选中值可以工作。