ionic4的ion-searchbar的setFocus()方法使用

最新推荐文章于 2024-08-17 17:18:23 发布

侣行怪咖

最新推荐文章于 2024-08-17 17:18:23 发布

阅读量939

点赞数 1

本文链接：https://blog.csdn.net/G_x_n/article/details/104926507

版权

前端知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用场景：

app的某个页面需要一个搜索功能：
	1. 点击搜索图标打开一个新的搜索页
	2. 加载页面的同时给搜索框设置焦点、触发键盘。（提升用户的体验，类似于微信的搜索功能操作）

具体方法：

在对应的ts文件中引入IonSearchbar

// 导入 IonSearchbar
import { IonSearchbar} from '@ionic/angular';

@Component({
  selector: 'app-file-search',
  templateUrl: './file-search.component.html',
  styleUrls: ['./file-search.component.scss'],
})
export class FileSearchComponent implements OnInit {
  // 申明 IonSearchbar 为 ionSearchbar；下边通过this.ionSearchbar调用setFocus()方法。
  @ViewChild(IonSearchbar, { static: true }) ionSearchbar: IonSearchbar;

  constructor() { }
  
  ngOnInit() { }

  // 该方法在加载页面时会触发
  ionViewDidEnter() {
    setTimeout(() => {
      // 给ion-Searchbar组件的输入框设置焦点
      this.ionSearchbar.setFocus();
    });
  }
}