小程序之显示全部城市列表界面

最新推荐文章于 2024-09-09 15:32:00 发布

zhanjinfeng

最新推荐文章于 2024-09-09 15:32:00 发布

阅读量4.4k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/zhanjinfeng/article/details/81270651

版权

这篇博客介绍了如何在微信小程序中设计一个显示全部城市列表的界面，并且集成了搜索功能。通过引用wx-list-index组件，从allCity.js文件获取城市数据。在wxml文件中设置相关属性来绑定数据和事件，同时在wxss文件中调整样式以避免显示问题。搜索功能只需在list-html标签中启用search属性。

摘要由CSDN通过智能技术生成

界面设计

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

github地址：https://github.com/mehaotian/wx-list-index

上图：

js文件：

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

var city = [

  {

    title: "热门城市",

    type: 'hot',

    item: [

      {

        "name": "北京",

        "key": "热门",

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

      },

      {

        "name": "上海",

        "key": "热门"

      },

      {

        "name": "广州",

        "key": "热门"

      }]
       
    },
    {

    title: "A",

    item: [

      {

        "name": "阿坝",

        &