View Filter
filter 理解为管道加工处理, 你扔给我一组数据 经过各种不同类型的管道加工 产出新的数据 但是又不会影响修改原数据, 最终展示给用户.
现有前端框架filter一般:
time | dateTime('yyy-mm-dd')
使用 | 作为管道符 传递参数进行序列化
缺陷:
截止目前,小程序官方并没有管道实现方式,以下列出了替代几种方案,供大家选择使用.
直接修改原数据
在请求完成之后 对返回值data进行一次数据处理 比如 抽象一个_formatListData方法对 返回进行二次处理.
_formatListData(list) {
return list.map((item) => {
let date = FormatUtil.getDateTime(item.childBirth);
item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
return item;
}
}
这种方式会给原数据添加新字段 filterChildBirth (原字段为 childBirth) . 最终展示也是显示filterChildBirth 到view上面,多个需要filter的字段都通过这种方式去处理,很明显 对一些业务型filter倒还好 如果遇到filter需要 共享 就比较坑.
ES6 get
data : {
time : 1511748300571
}
get time (){
return FormatUtil.getDate(this.data.time);
}
通过get方法来实现对字段显示过滤. 只能操作对象 对数组中的item 比较无力.
通过wxs 实现共享filter:(推荐)
1.首先我们建立共享filter文件夹,实现一个日期格式化
2.WXS 实现日期格式化(es6语法不能使用)
var DateFr = {
getDate: function (time, splitStr) {
if (!time) return '';
var date =getDate(time);
var M = date.getMonth() + 1;
var y = date.getFullYear();
var d = date.getDate();
if (M < 10) M = "0" + M;
if (d < 10) d = "0" + d;
if (splitStr)
return y +splitStr + M +splitStr+d;
else
return {
y: y,
M: M,
d: d
};
}
}
module.exports = {
getDate: DateFr.getDate
}
3.在业务页面wxml中引用wxs
<wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>
4.使用filter
<text >{{dateFr.getDate(item.createdAt,':')}}</text>