微信小程序实现城市列表选择微信小程序实现城市列表选择
主要为大家详细介绍了微信小程序实现城市列表选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下
实现效果预览
实现功能简介实现功能简介
城市的选择
按中文/拼音/首字母条件搜索
按首字字母快速定位到城市位置
目录结构目录结构
主要代码主要代码
app.js
App({
globalData: {
trainBeginCity: '杭州',
trainEndCity: '北京'
}
})
app.json
{
"pages":[
"pages/index/index",
"pages/citys/citys"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
}
}
index.wxml
<view class='warning-top'>测试消息消息这是测试消息啊啊啊</view>
<form bindsubmit="formSubmit" bindreset="formReset" class='form-content'>
<view class='flex-box' data-id='出发城市'>
<view class='flex-box-header'>出发城市</view>
<view class="flex-box-content">
<input name='beginCity' value='{{begin}}' disabled='disabled' placeholder="" bindtap='bindBeginCityView' class='input-city'/>
</view>
</view>
<view class="flex-box" data-id='目的城市'>
<view class='flex-box-header'>目的城市</view>
<view class="flex-box-content">
<input name='endCity' value='{{end}}' placeholder="" disabled='disabled' bindtap='bindEndCityView' class='input-city'/>
</view>
</view>
<view class="flex-box">
<view class='flex-box-header'>出发日期</view>
<picker mode="date" name='leaveDate' class='flex-box-content-pricker' value="{{date}}" start="2018-01-01" end="2019-09-01" bindchange="bindDateChange" >
<view class='input-city'>{{date}}</view>
</picker>
</view>