小程序实现城市搜索和城市选择功能，打开小程序时根据定位获取当前城市，点击城市地址可跳到选择城市页面进行选择，点击选择后可处理响应的数据后返回当前页面。
demo.wxml
<view class='wrapper'>
<list-html data="{{city}}" binddetail="bindtap" my-city config="{{config}}"></list-html>
</view>demo.js
// pages/demo/demo.js
let City = require('../../utils/allcity.js');
Page({
data: {
city: [],
config: {
horizontal: true, // 第一个选项是否横排显示（一般第一个数据选项为 热门城市，常用城市之类 ，开启看需求）
animation: true, // 过渡动画是否开启
search: true, // 是否开启搜索
searchHeight: 45, // 搜索条高度
suctionTop: true // 是否开启标题吸顶
}
},
onLoad() {
// wx.showLoading({
// title: '加载数据中...',
// })
// // 模拟服务器请求异步加载数据
// setTimeout(()=>{
this.setData({
city: City
})
// wx.hideLoading()
// },2000)
},
bindtap(e) {
console.log(e.detail)
},
})demo.wxss
/* pages/dome/dome.wxss */
.wrapper {
height: 100vh;
}
/* 关闭滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.list-search {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 90rpx;
padding: 10rpx 30rpx;
box-sizing: border-box;
z-index: 20;
background: #FFF;
}
.search-title {
flex-shrink: 0;
font-size: 28rpx;
padding-right: 10rpx;
}
.list-search-box {
display: flex;
align-items: center;
padding: 0 30rpx;
width: 100%;
height: 70rpx;
background: #f5f5f5;
border-radius: 90rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.list-search-box input {
width: 100%;
padding-left: 10rpx;
}
.search-button {
/* width: 100rpx; */
flex-shrink: 0;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
margin-left: 10rpx;
}allcity.js
//下面的下载地址有源码
码云下载地址：https://gitee.com/liqingbo/selectCity.git