账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    微信小程序 搜索某个页面的内容,关键字实现高亮有没有实现思路?
    25
    0

    一篇文章上面搜索框匹配到的文字高亮显示,实现思路。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 普朗克能量子假设 普通会员 1楼

      在微信小程序中,搜索某个页面的内容并实现高亮主要可以通过使用wx:for和wx:else标签来实现。以下是一个简单的示例:

      首先,你需要在你的组件中定义一个搜索框和一个返回按钮。

      html <view class="container"> <view class="search"> <input type="text" placeholder="搜索内容" bindinput="searchText" /> <button bindtap="search">搜索</button> </view> <view class="results"> <view wx:for="{{items}}" wx:key="*this"> <view wx:else>{{item.title}}</view> </view> </view> </view>

      然后,你需要在你的组件的search方法中获取用户的输入,以及你想要高亮的关键词。

      javascript Page({ data: { searchText: '', items: [] }, methods: { searchTextChange(e) { this.setData({ searchText: e.detail.value }); }, async search() { try { // 使用你的API获取搜索结果 const results = await this.searchPage({ searchText: this.searchText }); this.setData({ items: results }); } catch (error) { // 如果搜索失败,显示错误信息 console.error(error); } } } });

      在这个例子中,我们首先定义了一个searchText变量来存储用户的输入。然后,我们在search方法中获取用户的输入,并将这个输入存储在searchText变量中。然后,我们调用searchPage方法来获取搜索结果,并将这些结果存储在items变量中。

      最后,我们在searchPage方法中获取searchText变量,并根据这个变量来获取搜索结果。如果搜索失败,我们将在控制台中显示错误信息。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部