效果预览

实现功能简介

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

目录结构

代码

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'测试消息消息这是测试消息啊啊啊/viewform 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.wxss

.flex-box {  display: flex;  flex-direction: row;  border-bottom: #CCCCCC solid 1px;  margin: 28rpx;  width: 600rpx;  padding:10rpx;  height: 70rpx;}.btn-area{  margin: 30rpx;  width: 600rpx;}.flex-box-header{  width: 25%;  font-size: 30rpx;  margin-top: 10rpx;  color: #999999;  /* line-height: 60rpx; */}.flex-box-content{  width: 70%;  margin-top: 0rpx;   font-size: 45rpx;}.flex-box-content-pricker{  margin-top: 0rpx;   width: 70%;  font-size: 45rpx;}.form-content{  margin-top:30rpx;   display: flex;  margin-left: 5%;  width: 90%;  background-color: #FFFFFF;  border-radius: 20rpx;  /* border: 3rpx solid #CCCCCC;  */  height: 530rpx;}.bus-view{  display: flex;  flex-direction: row;  width: 700rpx;  height: 100rpx;  margin:20rpx;  font-size: 30rpx;  border-bottom: 1rpx solid #CCCCCC; }.bus-view-left{  text-align: center;  line-height: 100rpx;  font-size: 30rpx;  width: 200rpx;  /* border-right: 1rpx solid #CCCCCC;  */}.bus-view-right{  width: 300rpx;  display: flex;  flex-direction: column;  font-size: 28rpx;   /* border: 1rpx solid #CCCCCC; */}.bus-view-right-item{  text-align: center;  margin: 5rpx;}.btn-query{  background-color:#3399CC;  color:#FFFFFF;}.input-city{     /* border: 1rpx solid #CCCCCC;  */}

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 || this.data.date.trim() == "") {      var day = new Date()      day.setTime(day.getTime() + 24 * 60 * 60 * 1000);      var year = day.getFullYear();       //年      var month = day.getMonth() + 1;     //月      var day = day.getDate();            //日      if (month  10) { month = "0" + month; }      if (day  10) { day = "0" + day; }      this.setData({ date: year + '-' + month + '-' + day })    }  }, onPullDownRefresh: function () {    wx.stopPullDownRefresh();  }, bindBeginCityView: function () {    wx.navigateTo({      url: '../citys/citys?cityType=begin'