界面设计

上图：

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

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

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

相关视频：

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

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