小程序搜索列表页实现搜索词高亮(支持微信和百度)
发布时间:2020-06-02 09:35:18 来源: 点击:
搜索词高亮,如果使用php或者js都可以轻松的搞定,只需要替换关键词,并且加上标签即可,但是小程序如果直接
是的 你没有看错,rich-text是无法支持text属性的,但是他支持span等标签,然后调用方式:
前端页面调用方式
实现效果如图:

严禁转载,严禁六九阁无耻抄袭
则会出现无法被解析的情况,这时候就需要用到富文本了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>
实现效果如图:

严禁转载,严禁六九阁无耻抄袭
精彩推荐相关内容
- (2019-04-03)php 微信用户昵称对emoji表情转义
- (2019-09-16)关于百度小程序微信小程序video标签不支...
- (2019-07-12)小程序首页加载之前加载其他相关资源或...
- (2020-06-02)小程序搜索列表页实现搜索词高亮(支持...
- (2018-02-22)phpcms开发微信小程序api
- (2018-01-14)phpcms开发微信小程序接口之获取栏目信...
- (2018-07-25)thirdScriptError console.dir is no...
- (2018-01-30)微信小程序实现列表页的点赞和取消点赞...
- (2018-03-03)小程序的button无法去掉边框的问题处理方法
- (2018-12-18)phpcms小程序插件4.0版正式上线
相关栏目
热门文章
最新图文
-
- Time:2020-06-02
-
- Time:2019-09-16
-
- Time:2018-12-18
-
thirdScriptError console.dir is not a function 报错的解决方法
- Time:2018-07-25
-
- Time:2018-03-03
-
- Time:2018-02-22
-
- Time:2018-01-14
-
wxparse:让小程序支持html标签(直接调用网站内容)
- Time:2017-12-18
评论排行
- (5)条phpcms筛选功能(经典无错)
- (4)条朋友圈转“贩卖儿童判死”
- (4)条微信即将封杀分销平台?传30
- (3)条做优化,十个最让用户反感的
- (2)条phpcms v9字段筛选教程
- (2)条【织梦bug】织梦5.7进入后台
- (2)条phpcms v9通用api开发教程
- (1)条网页制作技巧教程:网页无障
- (1)条贪吃的阿里:阿里2年疯狂并
- (1)条史上最全SEO高级搜索命令大全