使用場景：

app的某個頁面需要一個搜索功能：1. 點(diǎn)擊搜索圖標(biāo)打開一個新的搜索頁2. 加載頁面的同時給搜索框設(shè)置焦點(diǎn)、觸發(fā)鍵盤。（提升用戶的體驗(yàn)，類似于微信的搜索功能操作）

具體方法：

在對應(yīng)的ts文件中引入IonSearchbar

// 導(dǎo)入 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調(diào)用setFocus()方法。@ViewChild(IonSearchbar, { static: true }) ionSearchbar: IonSearchbar;constructor() { }ngOnInit() { }// 該方法在加載頁面時會觸發(fā)ionViewDidEnter() {setTimeout(() => {// 給ion-Searchbar組件的輸入框設(shè)置焦點(diǎn)this.ionSearchbar.setFocus();});} }

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

<ion-searchbar #ionSearchbar ...>

效果展示

附上Ionic4官方手冊：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。