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;
        }
    }
}