小程序开发中实现全部城市列表搜索界面的方法

why 116 2024-08-09

用小程序实现显示全部城市列表的界面，首先要考虑界面设计：对wx小程序索引列表组件进行引用；然后实现搜索功能：改组件自带搜索功能，只需在wxml中list-html标签中声明search属性即可。

界面设计

对wx小程序索引列表组件进行引用

上图：

js文件：

所有的城市信息可用ajax获取，在这我从allCity.js文件中获取

var city = [
 
  {
 
    title: "热门城市",
 
    type: &#39;hot&#39;,
 
    item: [
 
      {
 
        "name": "北京",
 
        "key": "热门",
 
        "test": "testValue"//可自己添加其他信息
 
      },
 
      {
 
        "name": "上海",
 
        "key": "热门"
 
      },
 
      {
 
        "name": "广州",
 
        "key": "热门"
 
      }]
        
    },
    {
 
    title: "A",
 
    item: [
 
      {
 
        "name": "阿坝",
 
        "key": "A"
 
      },
 
      {
 
        "name": "阿拉善",
 
        "key": "A"
 
      },
     ]}
 
]

let City = require(&#39;../../../../utils/allCity.js&#39;);
 
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=&#39;wrapper&#39;> 
 
    <list-html
 
      data="{{city}}"
 
      my-city="{{cityInfo.city}}"
 
      binddetail="binddetail"
 
      horizontal
 
      search
 
      animation
 
    />
 
</view>