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

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

实现效果预览

 

实现功能简介

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

目录结构

主要代码

app.js

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

app.json

{
  "pages":[
    "pages/index/index",
    "pages/citys/citys"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

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',
    })
  }, bindEndCityView: function () {
    wx.navigateTo({
      url: '../citys/citys?cityType=end',
    })
  }, onShow: function () {
    this.setData({ begin: app.globalData.trainBeginCity })
    this.setData({ end: app.globalData.trainEndCity })
  }


})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50