• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序城市按首字母排序(如同苹果手机通讯录一样得效果) ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

如图

  

 

代码

  

 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>
View Code

 

  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      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序(一)认识微信小程序发布时间:2022-07-18
下一篇:
微信小程序前端解密获取手机号发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap