微信小程序实现全局搜索代码高亮的示例

来源：动视网责编：小采时间：2020-11-27 19:45:10

微信小程序实现全局搜索代码高亮的示例

微信小程序实现全局搜索代码高亮的示例:本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例，现在分享给大家，也给大家做个参考。需求最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需

推荐度：

点击下载本文 文档为doc格式

导读微信小程序实现全局搜索代码高亮的示例:本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例，现在分享给大家，也给大家做个参考。需求最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需

本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例，现在分享给大家，也给大家做个参考。

需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，高亮效果。

代码

wxml:

<view class='homePage'>
 <input bindinput="bindKeyInput"></input>
 <view wx:for="{{newJson}}" wx:for-item='item' wx:key>
 <rich-text nodes="{{item.name}}"></rich-text> 
 <rich-text nodes="{{item.address}}"></rich-text> 
 <rich-text nodes="{{item.age}}"></rich-text>
 <view wx:if="{{item.aihao}}" wx:for="{{item.aihao}}" wx:for-item='sitem' wx:key>
 <rich-text nodes="{{sitem}}"></rich-text> 
 </view>
 </view>
</view>

js:

上面是我整理给大家的，希望今后会对大家有帮助。

js+css实现打字效果

简单介绍react redux的中间件的使用

webpack源码之loader机制详解