微信小程式頁面內搜尋查詢(無後台)

2021-10-07 05:56:50 字數 1238 閱讀 2678

先上圖,這是我要實現的效果!

當我們沒有頁面內沒有分頁又需要搜尋時,我們可以直接在前端寫搜尋功能,這樣也極大的減輕了後台查詢壓力。

當我們進入頁面的時候肯定要進行後台查詢,這裡我直接模擬後台返回的json資料,先在data裡定義兩條一樣的json

data,]

,//這是頁面需要的json

list2:[,

]//這是查詢需要的json

}

搜尋方法

query

(e)}

//到這裡list2就已經是你查出的資料

if(e.detail.value =="")

)}else)}

}}

下面是wxml

<

input

type

="text"

placeholder

="搜尋門店"

bindinput

='query'

>

<

/input

>

<

scroll-view

scroll-y

="}"

>

<

view

wx:for

="}"

wx:key

="}"

>

<

view

>

<

view

>

}<

/view

>

<

/view

>

<

view

>

<

view

>

廣東省廣州市黃埔區永順大道萬科山景城一期東區

<

/view

>

<

/view

>

<

/view

>

<

/scroll-view

>

結束

tip:只有無分頁的時候才適用

本人也只是乙個菜鳥,不喜勿碰,歡迎大神來指點錯誤!

微信小程式無後台的下拉重新整理和上拉載入

1.上拉載入和下拉重新整理需要在json頁面中配置開啟下拉重新整理 enablepulldownrefresh true和 onreachbottomdistance 60設定頁面上拉觸底事件觸發時距頁面底部距離,單位為px。如果不設定上拉觸底的話預設是50px 2.首先先寫乙個公共方法,如下 xx...

微信小程式頁面布局

3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮,向左,向右,向下,向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...

微信小程式頁面布局

1.flex布局,是w3c在2009年提出的一種新的方案,可以簡便,完整,響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...