微信小程式搜尋框元件之SearchBar

2021-09-26 07:22:55 字數 1049 閱讀 5264

index.wxml

取消

index.js

// 本元件為搜尋元件

// 需要傳入addflag 值為true / false (搜尋框右側部分)

// 若顯示搜尋框右側部分 需傳入右側圖示url以及addhandle函式

component(

},addimg: ,

searchstr: ,

searchflag:

},/**

* 元件的初始資料

*/data: ,

/*** 元件的方法列表

*/methods: )

},//搜尋框右側按鈕事件

addhandle() ,

//搜尋輸入

searchlist(e) ,

//查詢

endsearchlist(e) ,

//失去焦點

blursearch() ,

// 取消

cancelsearch() )

this.triggerevent("cancelsearch");

},//清空搜尋框

activity_clear(e) ,

}})

index.wxss

.tit_seabox

.tit_seabox_bar

/*有許可權新增活動*/

.tit_seabox_bar.tit_seabox_add

/*開始搜尋時*/

.tit_seabox_bar.tit_start_search

/*開始搜尋且有許可權新增*/

.tit_seabox_bar.tit_start_search.tit_seabox_add

.tit_seabox_bar icon

.tit_seabox input

.activity_add

.activity_add image

.activity_seabtn

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...

微信小程式 select 下拉框元件

一 原始碼位址 二 效果圖 三 元件原始碼 1.select.wxml view class select box view class select current catchtap openclose text class current name text view view class op...