### [小程序开发实现搜索全部城市列表界面](https://www.prosaas.cn/article/17205)

**Published:** 2018-07-30T01:42:35

**Author:** 5201314

**Excerpt:** 用小程序实现显示全部城市列表的界面，首先要考虑界面设计：对wx小程序索引列表组件进行引用；然后实现搜索功能：改…

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

# 界面设计

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

上图：

![](https://img.php.cn//upload/image/718/527/628/1532914343573099.png)

## 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属性即可

![](https://img.php.cn//upload/image/255/545/854/1532914422910470.png)

相关文章：

详解微信小程序开发之城市选择器 城市切换

微信小程序开发之定位到当前城市方法讲解

相关视频：

实现文章列表界面-微信小程序开发从入门到精通视频教程

以上就是小程序开发实现搜索全部城市列表界面的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** ajax, animation, bug, html, JS, 事件, 微信小程序, 选择器

**Categories:** 后端开发

---