ionic4 ion-searchbar 组件常用

 

下边是ionic4 的搜索组件 比较常用的 

<ion-searchbar animated [(ngModel)]="bookName" (ionInput)="getItems($event)" (ionFocus)="focusInput()" (ionBlur)="blurInput()" 
 (ionClear)="cancel($event)"
    placeholder="请输入搜索内容" showCancelButton="focus" cancelButtonText="搜索">
</ion-searchbar>

animated  是一个小动画；

[(ngModel)]  跟3里一样传值的；

(ionClear)  当点击清除按钮时触发事件，同样的还有：

ionInput 监听input输入框的变化；

ionFocus 当input框获取焦点时触发；

ionBlur 当input框失去焦点时触发;

placeholder 这个就不用解释了，看上边代码就很明确了；

showCancelButton 这个直译也知道 是显示取消按钮，cancelButtonText 修改显示取消按钮默认文字 上边代码随便举例内容；

showCancelButton="focus" 中focus 还可以换成never，always；

 

我也简单整理了个ion-searchbar 获取焦点的方法 ：

https://blog.youkuaiyun.com/jasdolphin/article/details/100106004