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

发布日期： 2018-07-30 阅读量： 作者： 网络

用小程序实现显示全部城市列表的界面，首先要考虑界面设计：对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"

      },
     ]}

]

# 小程序城市列表

上一篇: 怎么下载python程序

下一篇: CSS 变量中如何将数字转换为字符串并与百分号连接？

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

随便看看