Uniapp搜索功能程序

最新推荐文章于 2024-07-17 18:17:15 发布

王忠超

最新推荐文章于 2024-07-17 18:17:15 发布

阅读量494

点赞数

文章标签： uni-app servlet java

本文链接：https://blog.csdn.net/congzi003/article/details/126935441

版权

该博客详细展示了如何在Uniapp中实现搜索功能，包括搜索历史的展示、清空和实时搜索操作。通过监听输入框的值变化，利用Vuex进行状态管理，并调用API接口获取搜索结果。同时，博客还提供了样式布局和事件处理的相关代码。

摘要由CSDN通过智能技术生成

<template>
   <view class="home">
       <navbar :isSearch="true" v-model="value" @input="change"></navbar>
       <view class="home-list">
           <view v-if="is_history" class="label-box">
               <view class="label-header">
                   <text class="label-title">搜索历史</text>
                   <text class="label-clear" @click="clear">清空</text>
               </view>
               <view v-if="historyLists.length>0" class="label-content">
                   <view class="label-content__item" v-for="(item,index) in historyLists" :key="index"
                       @click="openHistory(item)">
                       { {item.name}}
                   </view>
               </view>
               <view v-else class="no-data">没有搜索历史</view>
           </view>
           <list-scroll v-else class="list-scroll">
               <uni-load-more v-if="loading" status="loading" iconType="snow"></uni-load-more>
               <view v-if="searchList.length > 0">
                   <list