这篇帖子写给刚接触小程序的新手,希望在数据绑定方面给大家一点灵感,也欢迎大家积极的探讨更好的双向绑定思路。
废话不多说,先上代码吧
//小程序提供的事件比较匮乏,也可能是我文档看的比较糙,在输入方面,主要的两种情况如下
//一类是bindchange,一类是bindtap
<radio-group data-set='sex' bindchange='bindtap'>
<label class='radio' wx:for='{{genders}}'>
<radio value='{{item.name}}' checked='{{item.checked}}' />{{item.value}}
</label>
</radio-group>
<checkbox data-set='bxy' bindtap='bindtap'></checkbox>
//通过给元素绑定一个data-set值,表明要修改的字段。
//两类事件获取最新值的方式存在一点差异。
//先取到要修改的key,再通过type判断根据哪种方式获取value
//通过setData方式更新数据,底层会把最新的数据渲染到视图。
//在大表单和数据关联复杂时,这种方式可以大大节省时间。
bindtap: function (e) {
var key = e.currentTarget.dataset.set;
if (e.type == 'tap') {
var obj = {};
obj['form.' + key] = !this.data.form[key];
this.setData(obj);
}
if (e.type == 'change') {
var obj = {};
obj['form.' + key] = e.detail.value;
this.setData(obj);
}
}
可以基于data自定义属性的方式,抽离封装更加通用的赋值函数,放在app.js中,全局引用。
最后基于 小程序5层页面限制,有设计或者实际开发经验丰富的小哥哥,小姐姐有好的navigateTo or redirectTo原则吗?
操作流程中navigateTo和redirectTo如何取舍会比较好呢?
【【手动萌萌哒】】
网友评论