搜索页面-结构搭建

一、调整navBar为动态组件

添加是否为搜索界面判断

1. isSearch，当界面为搜索界面时，添加返回icon图标

 <!--当界面为搜索界面的时候，添加回退按钮  -->
      <view :style="{top:statusHeight + 'rpx'}" class="return-icon" v-if="isSearch">
        <uni-icons type="back" size="22" color="white"></uni-icons>
      </view>

<style>
   /* 搜索界面单独添加样式 */
    .return-icon {
        position: absolute;
        left: 0;
        top: 50%;
        height: 60rpx;
        @include flex(center);
    }
</style>

2. 为点击事件添加条件处理，当为搜索界面时，阻止跳转事件

   	if (this.isSearch) return
   				uni.navigateTo({
   					url: '/pages/search/search'
   				})
   

3. 调整样式处理，根据条件添加🔙按钮，并绑定返回事件

      *<!--当界面为搜索界面的时候，添加回退按钮  -->*
   
      ​      *<*view @click="returnArticleList" :style="{top:statusHeight + 'rpx'}" class="return-icon" v-if="isSearch"*>*
   
      ​        *<*uni-icons type="back" size="22" color="white"*></*uni-icons*>*
   
      ​      *</*view*>*
   
   
   

4. 添加回退事件，根据平台使用指定事件

   	// 返回文章列表界面
   			returnArticleList() {
   				// #ifdef H5
   				uni.switchTab({
   					url: '../../pages/index/index'
   				})
   				// #endif
   				// #ifndef H5
   				uni.navigateBack()
   				// #endif
   
   			}
   

二、搜索界面结构搭建

​ 根据当前状态，进行内容条件渲染

  <view class="search-container">
    <!-- 搜索导航组件 -->
    <NavBar :isSearch="isSearch"></NavBar>
    <!-- 搜索包裹 -->
    <view class="search-wrapper">
      <!-- 没有进行搜索的操作 -->
      <view v-if="false" class="search-history-container">
        <!-- 头部 -->
        <view class="search-header">
          <text class="history-text">搜索历史</text>
          <text class="history-clean">清空</text>
        </view>
        <!-- 内容部分 -->
        <view class="search-history-content">
          <view class="history-content-item" v-for="item in 10" :key="item">直播</view>
        </view>

        <view class="no-data">当前没有搜索历史</view>
      </view>

      <!-- 开始进行搜索的操作 -->
      <view v-else class="search-list-container">
        <ListItem v-if="searchList.length"></ListItem>
         <view v-else class="no-data">没有搜索到相关数据</view>
      </view>
    </view>
  </view>