QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

小程序

首页 > 小程序 >

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

 admin  2020-06-02 09:36:28
搜索词高亮,如果使用php或者js都可以轻松的搞定,只需要替换关键词,并且加上标签即可,但是小程序如果直接
  1. <text style="color:#ef5718">' + q + '</text> 
则会出现无法被解析的情况,这时候就需要用到富文本了rich-text,实现代码如下:
  1. /** 
  2.    * 高亮搜索列表关键词 (严禁六九阁无耻抄袭)
  3.    */ 
  4.   heightLight(list, q) { 
  5.     var reg = new RegExp(q, "g"
  6.     var rep = '<span style="color:#ef5718">' + q + '</span>'
  7.     if (list) { 
  8.       for (var i in list) { 
  9.         list[i].description = list[i].description.replace(reg, rep); //需要处理的字段
  10.         list[i].title = list[i].title.replace(reg, rep); 
  11.       } 
  12.     } 
  13.     return list; 
  14.   }, 

是的 你没有看错,rich-text是无法支持text属性的,但是他支持span等标签,然后调用方式:
  1. list = that.heightLight(list, q);//高亮 
  2. that.setData({ 
  3.      list: list, 
  4.  }) 

前端页面调用方式
  1. <rich-text nodes="{{item.description}}"></rich-text> 

实现效果如图:


严禁转载,严禁六九阁无耻抄袭

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

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序