微信小程序完成城市下文的选择

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

这篇文章主要为大家详细介绍了微信小程序实现城市列表选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下

实现效果预览

微信小程序实现城市列表的选择

实现功能简介

城市的选择
按中文/拼音/首字母条件搜索
按首字字母快速定位到城市位置

目录结构

微信小程序实现城市列表的选择

主要代码

app.js

App({
 globalData: {
 trainBeginCity: '杭州',
 trainEndCity: '北京'
 }
})

{ "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>

 <view class="btn-area">
 <button formType="submit" class='btn-query'>查询</button>
 </view>
</form>
index.js
const app = getApp()

Page({
 data: {
 begin: '',
 end: '',
 date: null
 },

 formSubmit: function (e) {
 // console.log('form发生了submit事件，携带数据为：', e.detail.value)
 wx.navigateTo({
 url: '../trains/trains?beginCity=' + e.detail.value.beginCity + "&endCity=" + e.detail.value.endCity + "&leaveDate=" + e.detail.value.leaveDate,
 })
 },
 formReset: function () {
 console.log('form发生了reset事件')
 },
 bindDateChange: function (e) {
 this.setData({
 date: e.detail.value
 })
 },
 onLoad: function (options) {
 // wx.navigateTo({
 // url: '../citys/citys?cityType=begin',
 // })


 if (this.data.date == null   关键词：微信小程序完成城市下文的选择