微信小程序实现城市列表的选择（小程序获取城市）

微信小程序实现城市列表的选择（小程序获取城市）

这篇文章主要为大家详细介绍了微信小程序实现城市列表选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下

实现效果预览

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

实现功能简介

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

目录结构

主要代码

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

测试消息消息这是测试消息啊啊啊出发城市目的城市出发日期{{date}}查询-

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

citys.wxss

.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;}-

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。