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

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

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

<view>测试消息消息这是测试消息啊啊啊</view>

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 + "&amp;endCity=" + e.detail.value.endCity + "&amp;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 <p></p><p>index.wxss</p><p class="jb51code"></p><pre class="brush:css;toolbar:false;">.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; */}

<view> <input></view><view> <view> <view>{{item.cityName}}</view> </view></view><view> <view> <view> 1}}" class='city-item' data-cityname='{{item.cityName}}' bindtap='citySelected'&gt;{{item.cityName}}</view> <view>{{item.cityName}}</view> <!-- <view data-cityname=&#39;{{item.cityName}}&#39; bindtap=&#39;citySelected&#39; >{{item.cityName}}</view> --> </view></view>

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 <p></p><p>citys.wxss</p><p class="jb51code"></p><pre class="brush:css;toolbar:false;">.a-z{ width: 35rpx; position: fixed; top: 112rpx; text-align: center; right: 5rpx; color: #3399CC; font-size: 30rpx; /* border: 1rpx solid #3399CC; */}.city-item-content { display: flex; flex-direction: column; justify-content: center; margin-top: 110rpx; background-color: #FFFFFF;}.city-item { background: #fff; /* margin-top: 5rpx; */ width: 80%;  padding-left: 5%; margin-left: 5%; height: 90rpx; font-size: 45rpx; line-height: 100rpx; border-bottom: 1rpx solid #CCCCCC;  /* border:1rpx solid red; */}.city-item-A-Z{ width: 100%; height: 40rpx; font-size: 30rpx; padding-left: 10%; background-color: #EEEEEE; border-top: 1rpx solid #CCCCCC;  margin-top: -1rpx;}.search-box { top: 0; position: fixed; width: 100%; /* left:5%; */ background: #eee; height: 110rpx; font-size: 30rpx; border-bottom:1rpx solid #DDDDDD;  /* border: 1rpx solid red; */}.search-input { height: 70rpx; line-height: 60rpx; width: 80%; margin-left: 7.5%; border-radius: 20rpx; /* border: 1rpx solid red; */ background: #fff; margin-top: 20rpx; padding-left: 5%;}.search-input-placeholder { text-align: center;}