小程序搜索列表页实现搜索词高亮(支持微信和百度小程序)

搜索词高亮,如果使用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>?

实现效果如图:
技术分享图片

严禁六九阁无耻抄袭,拒绝抄袭,拒绝无耻

小程序搜索列表页实现搜索词高亮(支持微信和百度小程序)

原文:https://blog.51cto.com/14519322/2524155

以上是小程序搜索列表页实现搜索词高亮(支持微信和百度小程序)的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>