你可以在搜索结果渲染的时候,对匹配到的关键字进行处理,将其使用<text>组件包裹起来,并设置style属性为蓝色。具体的实现步骤如下:

  1. 获取搜索栏输入的关键字。
  2. 遍历搜索结果列表,对于每个搜索结果,使用正则表达式将关键字进行匹配,并将匹配到的部分用<text>组件包裹起来,并设置style属性为蓝色。
  3. 将处理后的搜索结果列表渲染到页面上。

示例代码如下:

Page({
  data: {
    keyword: "", // 搜索栏输入的关键字
    searchResult: [] // 搜索结果列表
  },
  // 输入框输入关键字时触发
  onInput(e) {
    this.setData({
      keyword: e.detail.value
    });
  },
  // 点击搜索按钮时触发
  onSearch() {
    // 根据关键字进行搜索,获取搜索结果列表
    // ...

    // 遍历搜索结果列表,对匹配到的关键字进行处理
    const { keyword, searchResult } = this.data;
    const regex = new RegExp(keyword, "g");
    const processedResult = searchResult.map(item => {
      const matchedText = item.name.replace(regex, `<text style="color: blue;">${keyword}</text>`);
      return {
        ...item,
        matchedText
      };
    });

    this.setData({
      searchResult: processedResult
    });
  }
});

在页面的 WXML 中,使用wx:for指令渲染搜索结果列表,并将匹配到的关键字渲染为富文本:

<!-- 搜索栏 -->
<input bindinput="onInput" bindconfirm="onSearch" />

<!-- 搜索结果列表 -->
<view wx:for="{{ searchResult }}">
  <text>匹配结果:{{ item.matchedText }}</text>
</view>

这样,搜索结果中与搜索栏输入的关键字相同的部分会以蓝色显示

微信小程序中我有一个搜索栏搜索出来的结果会以wxfor渲染成列表放在下面我希望把搜索出来的的结果中和搜索栏输入的一样的字改为蓝色该怎么办

原文地址: http://www.cveoy.top/t/topic/iK8x 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录