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

界面设计

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

上图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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" }, ]}]登录后复制

wxml文件

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

data: 列表里的数据源

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

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

search：是否显示搜索框

animation：是否加载过渡动画

登录后复制

wxss文件

只需添加list-html外层的view的高度height属性（不设置的话会出现bug,左侧的字母导航栏会跟随滚动）

.wrapper{ height: 1080rpx;}登录后复制

搜索功能

相关文章：

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

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

相关视频：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。