ionic4学习笔记16-某东项目搜索页面

小灰灰 2023-02-20 12:23 92阅读 0赞

1、增加手势事件模块

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

2、ionic5引入手势事件

2.1 app.module.js中引入

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70][]

2.2 main.ts中引入

//引入配置手势事件

import 'hammerjs';

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1][]

3、在搜索框中触发手势事件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627001109399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627001155466.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627001234152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbmdsZV9kZW5n,size_16,color_FFFFFF,t_70