小程序搜索列表页实现搜索词高亮(支持微信和百度)
admin
2020-06-02 09:36:28
则会出现无法被解析的情况,这时候就需要用到富文本了rich-text,实现代码如下:
- <text style="color:#ef5718">' + q + '</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>
实现效果如图:

严禁转载,严禁六九阁无耻抄袭
¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏
本文《小程序搜索列表页实现搜索词高亮(支持微信和百度) 》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/xiaocheng/804.html,否则禁止转载,谢谢配合!
文章点评