小程序開發實現搜索全部城市列表界面的示例

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

                                                       用小程序實現顯示全部城市列表的界面，首先要考慮界面設計：對wx小程序索引列表組件進行引用；然后實現搜索功能：改組件自帶搜索功能，只需在wxml中list-html標簽中聲明search屬性即可。

界面設計

對wx小程序索引列表組件進行引用

上圖：

js文件：

所有的城市信息可用ajax獲取，在這我從allCity.js文件中獲取

var city = [

  {

    title: "熱門城市",

    type: 'hot',

    item: [

      {

        "name": "北京",

        "key": "熱門",

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

      },

      {

        "name": "上海",

        "key": "熱門"

      },

      {

        "name": "廣州",

        "key": "熱門"

      }]
       
    },
    {

    title: "A",

    item: [

      {

        "name": "阿壩",

        "key": "A"

      },

      {

        "name": "阿拉善",

        "key": "A"

      },
     ]}

]

let City = require('../../../../utils/allCity.js');

Page({
    data: {
       city: City
    },

    //點擊相應城市觸發的事件
    binddetail(e) {

    console.log(e.detail)

    // 返回 例 :{name: "北京", key: "B", test: "testValue"}

    let cityinfo = e.detail.name

    wx.setStorageSync("wxb_cityinfo", cityinfo)

    var pages = getCurrentPages()

    var prevPages = pages.length-2

    wx.navigateBack({

      delta: prevPages

    })

  },
    
})

wxml文件

該組件中標簽中的屬性的含義為：

data: 列表里的數據源

my-city: 我的位置顯示的城市

binddetail: 點擊相應的城市名稱觸發的事件

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屬性（不設置的話會出現bug,左側的字母導航欄會跟隨滾動）

.wrapper{

  height: 1080rpx;

}

搜索功能

改組件自帶搜索功能，只需在wxml中list-html標簽中聲明search屬性即可

以上是“小程序開發實現搜索全部城市列表界面的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！