|
搜索词高亮，如果使用php或者js都可以轻松的搞定，只需要替换关键词，并且加上标签即可，但是小程序如果直接
- <text style="color:#ef5718">' + q + '</text>
则会出现无法被解析的情况，这时候就需要用到富文本了rich-text，实现代码如下：
- /**
- * 高亮搜索列表关键词 （严禁六九阁无耻抄袭）
- */
- heightLight(list, q) {
- var reg = new RegExp(q, "g")
- var rep = '<span style="color:#ef5718">' + q + '</span>';
- if (list) {
- for (var i in list) {
- list[i].description = list[i].description.replace(reg, rep); //需要处理的字段
- list[i].title = list[i].title.replace(reg, rep);
- }
- }
- return list;
- },
是的 你没有看错，rich-text是无法支持text属性的，但是他支持span等标签，然后调用方式：
- list = that.heightLight(list, q);//高亮
- that.setData({
- list: list,
- })
前端页面调用方式
- <rich-text nodes="{{item.description}}"></rich-text>
实现效果如图：
严禁六九阁无耻抄袭，拒绝抄袭，拒绝无耻
| 
转播
