先來看一下效果
2.1 顯示效果的設計
在切換到第二種輸入框時，把我們所有的資料都放在乙個scroll-view中顯示。當輸入內容時，觸發輸入事件，為輸入框新增bindinput屬性，在事件處理函式中查詢是否有資料項與輸入的內容匹配。如果有，則只顯示匹配的資料項。
2.2 文字搜尋的實現
如果我們的資料並不是很多，那麼就可以存放在頁面的js檔案中的data裡。利用以下方法可以查詢是否有資料項與輸入的內容匹配：
data裡定義兩個陣列：
list:[,
,,],
//這是搜尋到的結果
list2:[,
,,],
//這是所有可供查詢的記錄
var list =
this
.data.list2;
//先把所有資料項儲存
var list2 =
;//定義乙個陣列
//迴圈取每個資料項的主鍵，即藥品名name
for(
var i=
0;i//到這裡list2就是與搜尋結果匹配的資料項了
if(e.detail.value =="")
)}else
)}
wx:if
="}"
class
='search'
>
class
="search_image"
src='/icon/search.png'
>
image
>
type
='text'
placeholder
='搜尋藥品'
placeholder-class
="center"
confirm-type
='search'
bindfocus
="focushandler"
>
input
>
view
>
wx:if
="}"
class
='search'
>
class
="search_input"
type
='text'
placeholder
='搜尋藥品'
confirm-type
='search'
value
="}"
bindinput
='query'
>
input
>
class
="search_image"
src='/icon/cancel.png'
bindtap
='cancelhandler'
>
image
>
view
>
wx:if
="}"
class
="scrollview"
scroll-y
="true"
>
wx:for
="}"
wx:key
="name"
>
class
="scrollitem"
>
class
="font1"
space
="nbsp"
>
}text
>
} text
>
view
>
view
>
scroll-view
>
page(,
,,],
//這是搜尋到的結果
list2:[,
,,],
//這是所有可供查詢的記錄
focus:
false
,//控制是否顯示帶取消按鈕的搜尋框
inputvalue:""}
,focushandler
(e));}
,cancelhandler
(e));}
,query
(e))
//首先回顯輸入的字串
//實現搜尋的功能
var list =
this
.data.list2;
//先把第二條json存起來
var list2 =
;//定義乙個陣列
//迴圈去取資料
for(
var i=
0;i//到這裡list2就已經是你查出的資料
if(e.detail.value =="")
)}else)}
},
微信小程式搜尋框元件之SearchBar
index.wxml 取消index.js 本元件為搜尋元件 需要傳入addflag 值為true false 搜尋框右側部分 若顯示搜尋框右側部分 需傳入右側圖示url以及addhandle函式 component addimg searchstr searchflag 元件的初始資料 data ...
微信小程式頁面布局
3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮，向左，向右，向下，向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...
微信小程式頁面布局
1.flex布局，是w3c在2009年提出的一種新的方案，可以簡便，完整，響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊，方向以及順序，甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...