返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
小程序当前位置:首页 > cms教程 > 小程序 > 正文

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

发布时间:2020-06-02 09:35:18   来源:   点击:
搜索词高亮,如果使用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> 

实现效果如图:


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

相关栏目
热门文章
最新图文
评论排行
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814