使用場景：

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

在html文件中添加 ts文件中定義的 ionSearchbar

<ion-searchbar #ionSearchbar ...>

效果展示

附上Ionic4官方手冊：

https://ionicframework.com/docs/api/searchbar

總結

以上是生活随笔為你收集整理的ionic4的ion-searchbar的setFocus()方法使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。