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

##微信小程序实战—实现城市列表的选择
####实现效果预览

####实现功能简介

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

####目录结构

####主要代码
####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="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;
  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;  */
}

####citys.wxml





{ {item.cityName}}




{ {item.cityName}}
{ {item.cityName}}

####citys.js
const app = getApp()

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      cityType: options.cityType
    })
    if (this.data.cityResults == null) {
      this.setData({
        cityResults: this.data.citys
      })
    }
  },
  bindAZ: function (e) {
    var currentCityName = e.currentTarget.dataset.id
    var that = this;
    //放入A-Z的scrollTop参数
    if (that.data.scrollAZ == null) {
      wx.createSelectorQuery().selectAll('.city-item-A-Z').fields({
        dataset: true,
        size: true,
        rect: true
      }, function (res) {
        res.forEach(function (re) {
          if (currentCityName == re.dataset.cityname) {
            wx.pageScrollTo({
              scrollTop: re.top + that.data.scrollNow - 55.5,
              duration: 0
            })
          }
        })
      }).exec();
    } else {
      this.data.scrollAZ.forEach(function (re) {
        if (currentCityName == re.dataset.cityname) {
          wx.pageScrollTo({
            scrollTop: re.top + that.data.scrollNow - 55.5,
            duration: 0
          })
        }
      })
    }


  },
  onPageScroll: function (e) { // 获取滚动条当前位置
    this.setData({
      scrollNow: e.scrollTop
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  citySelected: function (e) {
    var cityNameTemp = e.currentTarget.dataset.cityname

    if (this.data.cityType == 'begin') {
      app.globalData.trainBeginCity = cityNameTemp
    }

    if (this.data.cityType == "end") {
      app.globalData.trainEndCity = cityNameTemp
    }

    wx.navigateBack()
  },
  bindSarchInput: function (e) {
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })

    var inputVal = e.detail.value;
    var cityResultsTemp = new Array()
    var citys = this.data.citys;

    if (inputVal == null || inputVal.trim() == '') {
      this.setData({
        cityResults: citys
      })
      return;
    }

    for (var i = 0; i < citys.length; i++) {
      if (citys[i].cityName.indexOf(inputVal) == 0 || citys[i].cityPY.indexOf(inputVal.toLowerCase()) == 0 || citys[i].cityPinYin.indexOf(inputVal.toLowerCase()) == 0) {
        //去除热门城市
        if (citys