如图
代码
1 <view class="input"> 2 <input bindinput="bindKeyInput" bindblur="bindBlur" placeholder="输入城市名或拼音查询" placeholder-style="font-size: 30rpx" value="{{inputName}}"></input> 3 </view> 4 5 <view class="container-inner"> 6 <view class="searchLetter touchClass"> 7 <view class="thishotText" bindtap="hotCity"> 8 <view style="margin-top:0;">当前</view> 9 <view style="margin-top:0;">热门</view> 10 </view> 11 <view wx:for="{{searchLetter}}" style="color:#FEC240;font-size:20rpx;" wx:key="*this" data-letter="{{item.name}}" catchtouchend="clickLetter">{{item.name}}</view> 12 </view> 13 <view class="container"> 14 15 <block wx:if="{{isShowLetter}}"> 16 <view class="showSlectedLetter"> 17 {{toastShowLetter}} 18 </view> 19 </block> 20 21 <scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-into-view="{{scrollTopId}}" scroll-top="{{scrollTop}}"> 22 23 24 <ul class="ul"> 25 <li wx:for="{{completeList}}" wx:key="*this" bindtap="bindCity" data-city="{{item.city}}" data-code="{{item.code}}" class="li">{{item.city}}</li> 26 </ul> 27 28 29 <view wx:if="{{condition}}" class="hotcity-common">选择区县</view> 30 <view wx:if="{{condition}}" class="county"> 31 <block class="hotCity" wx:for-items="{{countyList}}" wx:key="id"> 32 <view class="weui-grid" style="margin-right: 16rpx;" data-code="{{item.id}}" data-city="{{item.fullname}}" bindtap="bindCounty"> 33 <view class="weui-grid__label">{{item.fullname}}</view> 34 </view> 35 </block> 36 </view> 37 38 <view class="selectCity"> 39 <view class="hotcity-common" bindtap="reGetLocation">重新定位城区</view> 40 <view class="thisCityName" data-city="{{city}}" data-code="{{currentCityCode}}">{{city}}</view> 41 42 <view class="hotcity-common">热门城市</view> 43 <view class="weui-grids"> 44 <view class="weui-grid" data-code="110000" data-city="北京市" bindtap="bindCity"> 45 <view class="weui-grid__label">北京市</view> 46 </view> 47 <view class="weui-grid" data-code="310000" data-city="上海市" bindtap="bindCity"> 48 <view class="weui-grid__label">上海市</view> 49 </view> 50 <view class="weui-grid" data-code="440100" data-city="广州市" bindtap="bindCity"> 51 <view class="weui-grid__label">广州市</view> 52 </view> 53 </view> 54 <view class="weui-grids"> 55 <view class="weui-grid" data-code="440300" data-city="深圳市" bindtap="bindCity"> 56 <view class="weui-grid__label">深圳市</view> 57 </view> 58 <view class="weui-grid" data-code="330100" data-city="杭州市" bindtap="bindCity"> 59 <view class="weui-grid__label">杭州市</view> 60 </view> 61 <view class="weui-grid" data-code="320100" data-city="南京市" bindtap="bindCity"> 62 <view class="weui-grid__label">南京市</view> 63 </view> 64 </view> 65 <view class="weui-grids"> 66 <view class="weui-grid" data-code="420100" data-city="武汉市" bindtap="bindCity"> 67 <view class="weui-grid__label">武汉市</view> 68 </view> 69 <view class="weui-grid" data-code="120000" data-city="天津市" bindtap="bindCity"> 70 <view class="weui-grid__label">天津市</view> 71 </view> 72 <view class="weui-grid" data-code="610100" data-city="西安市" bindtap="bindCity"> 73 <view class="weui-grid__label">西安市</view> 74 </view> 75 </view> 76 </view> 77 78 79 <view class="selection" wx:for="{{cityList}}" wx:key="initial"> 80 <view class="item_letter" id="{{item.initial}}">{{item.initial}}</view> 81 <view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="id" data-code="{{ct.code}}" data-city="{{ct.city}}" bindtap="bindCity"> 82 {{ct.city}} 83 </view> 84 </view> 85 86 87 88 </scroll-view> 89 90 </view> 91 </view>
1 const city = require(\'../../../utils/city.js\'); 2 const cityObjs = require(\'../../../utils/city.js\'); 3 const config = require(\'../../../utils/config.js\'); 4 const appInstance = getApp(); 5 Page({ 6 data: { 7 searchLetter: [], 8 showLetter: "", 9 winHeight: 0, 10 cityList: [], 11 isShowLetter: false, 12 scrollTop: 0,//置顶高度 13 scrollTopId: \'\',//置顶id 14 city: "定位中", 15 currentCityCode: \'\', 16 hotcityList: [{ cityCode: 110000, city: \'北京市\' }, { cityCode: 310000, city: \'上海市\' }, { cityCode: 440100, city: \'广州市\' }, { cityCode: 440300, city: \'深圳市\' }, { cityCode: 330100, city: \'杭州市\' }, { cityCode: 320100, city: \'南京市\' }, { cityCode: 420100, city: \'武汉市\' }, { cityCode: 120000, city: \'天津市\' }, { cityCode: 610100, city: \'西安市\' },], 17 commonCityList: [{ cityCode: 110000, city: \'北京市\' }, { cityCode: 310000, city: \'上海市\' }], 18 countyList: [{ cityCode: 110000, county: \'A区\' }, { cityCode: 310000, county: \'B区\' }, { cityCode: 440100, county: \'C区\' }, { cityCode: 440300, county: \'D区\' }, { cityCode: 330100, county: \'E县\' }, { cityCode: 320100, county: \'F县\' }, { cityCode: 420100, county: \'G县\' }], 19 inputName: \'\', 20 completeList: [], 21 county: \'\', 22 condition: false, 23 }, 24 onLoad: function () { 25 // 生命周期函数--监听页面加载 26 const searchLetter = city.searchLetter; 27 const cityList = city.cityList(); 28 const sysInfo = wx.getSystemInfoSync(); 29 console.log(sysInfo); 30 const winHeight = sysInfo.windowHeight; 31 const itemH = winHeight / searchLetter.length; 32 let tempArr = []; 33 34 searchLetter.map( 35 (item, index) => { 36 // console.log(item); 37 // console.log(index); 38 let temp = {}; 39 temp.name = item; 40 temp.tHeight = index * itemH; 41 temp.bHeight = (index + 1) * itemH; 42 tempArr.push(temp) 43 } 44 ); 45 // console.log(tempArr); 46 this.setData({ 47 winHeight: winHeight, 48 itemH: itemH, 49 searchLetter: tempArr, 50 cityList: cityList 51 }); 52 53 this.getLocation(); 54 55 }, 56 onReady: function () { 57 // 生命周期函数--监听页面初次渲染完成 58 59 }, 60 onShow: function () { 61 // 生命周期函数--监听页面显示 62 63 }, 64 onHide: function () { 65 // 生命周期函数--监听页面隐藏 66 67 }, 68 onUnload: function () { 69 // 生命周期函数--监听页面卸载 70 71 }, 72 onPullDownRefresh: function () { 73 // 页面相关事件处理函数--监听用户下拉动作 74 75 }, 76 onReachBottom: function () { 77 // 页面上拉触底事件的处理函数 78 79 }, 80 81 clickLetter: function (e) { 82 // console.log(e); 83 console.log(e.currentTarget.dataset.letter) 84 const showLetter = e.currentTarget.dataset.letter; 85 this.setData({ 86 toastShowLetter: showLetter, 87 isShowLetter: true, 88 scrollTopId: showLetter, 89 }) 90 // const that = this; 91 // wx.showToast({ 92 // title: showLetter, 93 // disabled: true, 94 // duration: 500, 95 // complete: function() { 96 // that.setData({ 97 // scrollTopId: showLetter, 98 // }) 99 // } 100 // }) 101 const that = this; 102 setTimeout(function () { 103 that.setData({ 104 isShowLetter: false 105 }) 106 }, 500) 107 }, 108 reGetLocation: function () { 109 appInstance.globalData.defaultCity = this.data.city 110 appInstance.globalData.defaultCounty = this.data.county 111 console.log(appInstance.globalData.defaultCity); 112 //返回首页 113 wx.switchTab({ 114 url: \'../Travel/TravelHome\' 115 }) 116 }, 117 //选择城市 118 bindCity: function (e) { 119 // console.log("bindCity"); 120 // console.log(e); 121 this.setData({ 122 condition: true, 123 city: e.currentTarget.dataset.city, 124 currentCityCode: e.currentTarget.dataset.code, 125 scrollTop: 0, 126 completeList: [], 127 }) 128 this.selectCounty() 129 130 appInstance.globalData.defaultCity = this.data.city 131 appInstance.globalData.defaultCounty = \'\' 132 console.log(appInstance.globalData.defaultCity) 133 }, 134 135 bindCounty: function (e) { 136 console.log(e); 137 this.setData({ county: e.currentTarget.dataset.city }) 138 appInstance.globalData.defaultCounty = this.data.county 139 console.log(appInstance.globalData.defaultCounty); 140 141 wx.switchTab({ 142 url: \'../Travel/TravelHome\' 143 }) 144 }, 145 146 //点击热门城市回到顶部 147 hotCity: function () { 148 console.log("hotCity"); 149 this.setData({ 150 scrollTop: 0, 151 }) 152 }, 153 bindScroll: function (e) { 154 // console.log(e.detail) 155 }, 156 selectCounty: function () { 157 console.log("正在定位区县"); 158 let code = this.data.currentCityCode 159 // console.log(code); 160 const that = this; 161 wx.request({ 162 url: `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`, 163 success: function (res) { 164 // console.log(res.data) 165 // console.log(res.data.result[0]); 166 that.setData({ 167 countyList: res.data.result[0], 168 }) 169 // console.log(that.data.countyList); 170 console.log("请求区县成功" + `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`); 171 // console.log(res) 172 }, 173 fail: function () { 174 console.log("请求区县失败，请重试"); 175 } 176 }) 177 }, 178 getLocation: function () { 179 console.log("正在定位城市"); 180 this.setData({ 181 county: \'\' 182 }) 183 const that = this; 184 wx.getLocation({ 185 type: \'wgs84\', 186 success: function (res) { 187 let latitude = res.latitude 188 let longitude = res.longitude 189 wx.request({ 190 url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${config.key}`, 191 success: res => { 192 console.log(res) 193 // console.log(res.data.result.ad_info.city+res.data.result.ad_info.adcode); 194 that.setData({ 195 city: res.data.result.ad_info.city, 196 currentCityCode: res.data.result.ad_info.adcode, 197 county: res.data.result.ad_info.district 198 }) 199 that.selectCounty(); 200 } 201 }) 202 } 203 }) 204 }, 205 bindBlur: function (e) { 206 this.setData({ 207 inputName: \'\' 208 }) 209 }, 210 bindKeyInput: function (e) { 211 // console.log("input: " + e.detail.value); 212 this.setData({ 213 inputName: e.detail.value 214 }) 215 this.auto() 216 }, 217 auto: function () { 218 let inputSd = this.data.inputName.trim() 219 let sd = inputSd.toLowerCase() 220 let num = sd.length 221 const cityList = cityObjs.cityObjs 222 // console.log(cityList.length) 223
请发表评论