微信小程序开发中怎样实现搜索内容高亮功能

发布日期： 2018-06-12 阅读量： 作者： 网络

这次给大家带来微信小程序开发中怎样实现搜索内容高亮功能，微信小程序开发中怎样实现搜索内容高亮功能的注意事项有哪些，下面就是实战案例，一起来看一下。

需求

最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的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>

# 微信小程序 # 代码高亮

上一篇: 如何配置phpstudy

下一篇: 使用 Node.js 和 Redis 探索 Bloom Fi

微信小程序开发中怎样实现搜索内容高亮功能

随便看看