返回舊版| 微信建站| 我要建站 | 建站學習 | 加入收藏
小程序當前位置:首頁 > 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
辽宁十一选五一定牛图表