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

 

实现功能简介

城市的选择

按中文/拼音/首字母条件搜索

按首字字母快速定位到城市位置

目录结构

主要代码

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>测试消息消息这是测试消息啊啊啊</view> <form bindsubmit="formSubmit" bindreset="formReset"> <view data-id='出发城市'> <view>出发城市</view> <view> <input value='{{begin}}' disabled='disabled' placeholder="" bindtap='bindBeginCityView'/> </view> </view> <view data-id='目的城市'> <view>目的城市</view> <view> <input value='{{end}}' placeholder="" disabled='disabled' bindtap='bindEndCityView'/> </view> </view> <view> <view>出发日期</view> <picker mode="date" value="{{date}}" start="2018-01-01" end="2019-09-01" bindchange="bindDateChange" > <view>{{date}}</view> </picker> </view> <view> <button formType="submit">查询</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

<view> <input placeholder="中文/拼音/首字母" bindinput='bindSarchInput' placeholder-class='search-input-placeholder' /> </view> <view> <view wx:for="{{cityAZ}}" wx:key="unique"> <view data-id='{{item.cityName}}' bindtap='bindAZ'>{{item.cityName}}</view> </view> </view> <view> <view wx:for="{{cityResults}}" wx:key="unique"> <view wx:if="{{item.cityPinYin.length > 1}}" data-cityname='{{item.cityName}}' bindtap='citySelected'>{{item.cityName}}</view> <view wx:else data-cityname='{{item.cityName}}'>{{item.cityName}}</view> <!-- <view data-cityname='{{item.cityName}}' bindtap='citySelected' >{{item.cityName}}</view> --> </view> </view>

citys.js