【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例_第1頁
【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例_第2頁
【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例_第3頁
【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例_第4頁
【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

【移動應用開發(fā)技術】小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例

在下給大家分享一下小程序開發(fā)實現(xiàn)搜索全部城市列表界面的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

用小程序實現(xiàn)顯示全部城市列表的界面，首先要考慮界面設計：對wx小程序索引列表組件進行引用；然后實現(xiàn)搜索功能：改組件自帶搜索功能，只需在wxml中l(wèi)ist-html標簽中聲明search屬性即可。界面設計對wx小程序索引列表組件進行引用上圖：js文件：所有的城市信息可用ajax獲取，在這我從allCity.js文件中獲取var

city

=

[

{

title:

"熱門城市",

type:

'hot',

item:

[

{

"name":

"北京",

"key":

"熱門",

"test":

"testValue"http://可自己添加其他信息

},

{

"name":

"上海",

"key":

"熱門"

},

{

"name":

"廣州",

"key":

"熱門"

}]

},

{

title:

"A",

item:

[

{

"name":

"阿壩",

"key":

"A"

},

{

"name":

"阿拉善",

"key":

"A"

},

]}

]let

City

=

require('../../../../utils/allCity.js');

Page({

data:

{

city:

City

},

//點擊相應城市觸發(fā)的事件

binddetail(e)

{

console.log(e.detail)

//

返回

例

:{name:

"北京",

key:

"B",

test:

"testValue"}

let

cityinfo

=

wx.setStorageSync("wxb_cityinfo",

cityinfo)

var

pages

=

getCurrentPages()

var

prevPages

=

pages.length-2

wx.navigateBack({

delta:

prevPages

})

},

})wxml文件該組件中標簽中的屬性的含義為：data:列表里的數(shù)據(jù)源my-city:我的位置顯示的城市binddetail:點擊相應的城市名稱觸發(fā)的事件horizontal：是否顯示首行的內容（我的位置、熱門城市等）search：是否顯示搜索框animation：是否加載過渡動畫<view

class='wrapper'>

<list-html

data="{{city}}"

my-city="{{cityInfo.city}}"

binddetail="binddetail"

horizontal

search

animation

/>

</view>wxss文件只需添加list-html外層的view的高度height屬性（不設置的話會出現(xiàn)bug,左側的字母

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論