ionic4學習筆記16-某東項目搜索頁面

1、增加手勢事件模塊

#安裝手持事件
cnpm install hammerjs --save

2、ionic5引入手勢事件

    2.1 app.module.js中引入

import { HammerModule} from '@angular/platform-browser';

   2.2 main.ts中引入

//引入配置手勢事件

import 'hammerjs';

3、在搜索框中觸發手勢事件

4、完成路徑跳轉

    4.1 在ts代碼中引入NavController 

import { NavController } from '@ionic/angular';

   4.2 在構造函數中作爲入參

 constructor(public navController:NavController){}

   4.3使用navController對象完成跳轉

//跳轉到搜索頁面
  goSearch(){
    this.navController.navigateForward('/search');
  }

5、搜索頁面代碼

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">

      <ion-button (tap)="goBack()">
        <ion-icon slot="icon-only" name="arrow-back" color="dark"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-searchbar placeholder="Filter Schedules" animated></ion-searchbar>

    <ion-buttons slot="end">
      <ion-button (click)="doSearch()" color="dark">
        搜索
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div class="search_content">
    <div class="hotlist">
      <h3 class="search_title">熱搜</h3>
      <p>
        <span>女裝</span>
        <span>男裝</span>
        <span>傢俱</span>
        <span>化妝品</span>
        <span>女裝</span>
        <span>女裝</span>
        <span>男裝</span>
        <span>傢俱</span>
        <span>化妝品</span>
        <span>女裝</span>
        <span>女裝</span>
        <span>男裝</span>
        <span>傢俱</span>
        <span>化妝品</span>
        <span>女裝</span>
      </p>

    </div>

    <div class="history">

      <h3 class="search_title">歷史搜索</h3>

      <ion-list lines="full">
        <ion-item>
          男裝
        </ion-item>
        <ion-item>
          女裝
        </ion-item>
        <ion-item>
          汽車
        </ion-item>
        <ion-item>
          美容
        </ion-item>
      </ion-list>

    </div>

  </div>
</ion-content>

6、搜索頁面CSS

.search_content{


    .search_title{

        font-size: 1.6rem;

        font-weight: bold;

        padding: .5rem 0px;
    }

    .hotlist{

        p{

            padding: .5rem 0px;
            span{
                padding: .5rem;
                background: #eee;
                margin: .5rem .5rem;
                border-radius: .5rem;
                display: inline-block;

            }
        }


    }

    .history{

        ion-item{

            font-size: 1.4rem;
        }
    }
}