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

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

实现效果预览

 

实现功能简介

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

目录结构

主要代码

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>

  <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 || 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 })
  }


})

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