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

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

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

上图：

所有的城市信息可用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
})

该组件中标签中的属性的含义为：

data: 列表里的数据源

my-city: 我的位置显示的城市

binddetail: 点击相应的城市名称触发的事件

horizontal：是否显示首行的内容（我的位置、热门城市等）

search：是否显示搜索框

animation：是否加载过渡动画

 view >wxss文件
只需添加list-html外层的view的高度height属性（不设置的话会出现bug,左侧的字母导航栏会跟随滚动）
.wrapper{
 height: 1080rpx;
}
 搜索功能
改组件自带搜索功能，只需在wxml中list-html标签中声明search属性即可

相关文章：

详解微信小程序开发之城市选择器 城市切换
微信小程序开发之定位到当前城市方法讲解
相关视频：
实现文章列表界面-微信小程序开发从入门到精通视频教程
以上就是小程序开发实现搜索全部城市列表界面的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。