微信小程式實現城市選擇和城市切換
阿新 • • 發佈:2020-08-27
參考:https://www.jb51.net/article/141520.htm http://www.3qphp.com/web/html5/66.html
city.js var city = { "City": [ { "熱門城市": [ { "name": "北京市", "key": "熱門" }, { "name": "上海市", "key": "熱門" }, { "name": "廣州市", "key": "熱門" }, { "name": "深圳市", "key": "熱門" }, { "name": "成都市", "key": "熱門" }, { "name": "重慶市", "key": "熱門" }, { "name": "天津市", "key": "熱門" }, { "name": "杭州市", "key": "熱門" }, { "name": "南京市", "key": "熱門" }, { "name": "蘇州市", "key": "熱門" }, { "name": "武漢市", "key": "熱門" }, { "name": "西安市", "key": "熱門" } ], "A": [ { "name": "阿壩市", "key": "A" }, { "name": "阿拉善市", "key": "A" }, { "name": "阿里市", "key": "A" }, { "name": "安康市", "key": "A" }, { "name": "安慶市", "key": "A" }, { "name": "鞍山市", "key": "A" } , { "name": "安順市", "key": "A" } , { "name": "安陽市", "key": "A" } , { "name": "澳門市", "key": "A" } ], "B": [ { "name": "北京市", "key": "B" }, { "name": "白銀市", "key": "B" }, { "name": "保定市", "key": "B" }, { "name": "寶雞市", "key": "B" }, { "name": "保山市", "key": "B" }, { "name": "包頭市", "key": "B" }, { "name": "巴中市", "key": "B" } , { "name": "北海市", "key": "B" } , { "name": "蚌埠市", "key": "B" } , { "name": "本溪市", "key": "B" } , { "name": "畢節市", "key": "B" } , { "name": "濱州市", "key": "B" } , { "name": "百色市", "key": "B" } , { "name": "亳州市", "key": "B" } ], "C": [ { "name": "重慶市", "key": "C" }, { "name": "成都市", "key": "C" }, { "name": "長沙市", "key": "C" }, { "name": "長春市", "key": "C" }, { "name": "滄州市", "key": "C" }, { "name": "常德市", "key": "C" }, { "name": "昌都市", "key": "C" } , { "name": "長治市", "key": "C" } , { "name": "常州市", "key": "C" } , { "name": "巢湖市", "key": "C" } , { "name": "潮州市", "key": "C" } , { "name": "承德市", "key": "C" } , { "name": "郴州市", "key": "C" } , { "name": "赤峰市", "key": "C" } , { "name": "池州市", "key": "C" } , { "name": "崇左市", "key": "C" } , { "name": "楚雄市", "key": "C" } , { "name": "滁州市", "key": "C" } , { "name": "朝陽市", "key": "C" } ], "D": [ { "name": "大連市", "key": "D" }, { "name": "東莞市", "key": "D" }, { "name": "大理市", "key": "D" }, { "name": "丹東市", "key": "D" }, { "name": "大慶市", "key": "D" }, { "name": "大同市", "key": "D" }, { "name": "大興安嶺市", "key": "D" } , { "name": "德巨集市", "key": "D" } , { "name": "德陽市", "key": "D" } , { "name": "德州市", "key": "D" } , { "name": "定西市", "key": "D" } , { "name": "迪慶市", "key": "D" } , { "name": "東營市", "key": "D" } ], "E": [ { "name": "鄂爾多斯市", "key": "E" } , { "name": "恩施市", "key": "E" } , { "name": "鄂州市", "key": "E" } ], "F": [ { "name": "福州市", "key": "F" } , { "name": "防城港市", "key": "F" } , { "name": "佛山市", "key": "F" } , { "name": "撫順市", "key": "F" } , { "name": "撫州市", "key": "F" } , { "name": "阜新市", "key": "F" } , { "name": "阜陽市", "key": "F" } ] , "G": [ { "name": "廣州市", "key": "G" }, { "name": "贛州市", "key": "G" }, { "name": "桂林市", "key": "G" }, { "name": "貴陽市", "key": "G" }, { "name": "甘南市", "key": "G" }, { "name": "甘孜市", "key": "G" }, { "name": "廣安市", "key": "G" } , { "name": "廣元市", "key": "G" } , { "name": "果洛市", "key": "G" } , { "name": "貴港市", "key": "G" } ], "H": [ { "name": "杭州市", "key": "H" }, { "name": "哈爾濱市", "key": "H" }, { "name": "合肥市", "key": "H" }, { "name": "海口市", "key": "H" }, { "name": "海東市", "key": "H" }, { "name": "海北市", "key": "H" }, { "name": "海南市", "key": "H" } , { "name": "海西市", "key": "H" } , { "name": "邯鄲市", "key": "H" } , { "name": "漢中市", "key": "H" } , { "name": "鶴壁市", "key": "H" } , { "name": "河池市", "key": "H" } , { "name": "鶴崗市", "key": "H" } , { "name": "黑河市", "key": "H" } , { "name": "衡水市", "key": "H" } , { "name": "衡陽市", "key": "H" } , { "name": "河源市", "key": "H" } , { "name": "賀州市", "key": "H" } , { "name": "紅河市", "key": "H" } , { "name": "淮安市", "key": "H" } , { "name": "淮北市", "key": "H" } , { "name": "懷化市", "key": "H" } , { "name": "淮南市", "key": "H" } , { "name": "黃岡市", "key": "H" } , { "name": "黃南市", "key": "H" } , { "name": "黃山市", "key": "H" }, { "name": "黃石市", "key": "H" }, { "name": "惠州市", "key": "H" }, { "name": "葫蘆島市", "key": "H" }, { "name": "呼倫貝爾市", "key": "H" }, { "name": "湖州市", "key": "H" } , { "name": "菏澤市", "key": "H" } ], "J": [ { "name": "濟南市", "key": "J" }, { "name": "佳木斯市", "key": "J" }, { "name": "吉安市", "key": "J" }, { "name": "江門市", "key": "J" }, { "name": "焦作市", "key": "J" }, { "name": "嘉興市", "key": "J" }, { "name": "嘉峪關市", "key": "J" } , { "name": "揭陽市", "key": "J" } , { "name": "吉林市", "key": "J" } , { "name": "金昌市", "key": "J" } , { "name": "晉城市", "key": "J" } , { "name": "景德鎮市", "key": "J" } , { "name": "荊門市", "key": "J" } , { "name": "荊州市", "key": "J" } , { "name": "金華市", "key": "J" } , { "name": "濟寧市", "key": "J" } , { "name": "晉中市", "key": "J" } , { "name": "錦州市", "key": "J" } , { "name": "九江市", "key": "J" } , { "name": "酒泉市", "key": "J" } ] , "K": [ { "name": "昆明市", "key": "K" } , { "name": "開封市", "key": "K" } ] , "L": [ { "name": "蘭州市", "key": "L" }, { "name": "拉薩市", "key": "L" }, { "name": "來賓市", "key": "L" }, { "name": "萊蕪市", "key": "L" }, { "name": "廊坊市", "key": "L" }, { "name": "樂山市", "key": "L" }, { "name": "涼山市", "key": "L" } , { "name": "連雲港市", "key": "L" } , { "name": "聊城市", "key": "L" } , { "name": "遼陽市", "key": "L" } , { "name": "遼源市", "key": "L" } , { "name": "麗江市", "key": "L" } , { "name": "臨滄市", "key": "L" } , { "name": "臨汾市", "key": "L" } , { "name": "臨夏市", "key": "L" } , { "name": "臨沂市", "key": "L" } , { "name": "林芝市", "key": "L" } , { "name": "麗水市", "key": "L" } , { "name": "六安市", "key": "L" } , { "name": "六盤水市", "key": "L" } , { "name": "柳州市", "key": "L" } , { "name": "隴南市", "key": "L" } , { "name": "龍巖市", "key": "L" } , { "name": "婁底市", "key": "L" } , { "name": "漯河市", "key": "L" } , { "name": "洛陽市", "key": "L" }, { "name": "瀘州市", "key": "L" }, { "name": "呂梁市", "key": "L" } ], "M": [ { "name": "馬鞍山市", "key": "M" } , { "name": "茂名市", "key": "M" } , { "name": "眉山市", "key": "M" } , { "name": "梅州市", "key": "M" } , { "name": "綿陽市", "key": "M" } , { "name": "牡丹江市", "key": "M" } ], "N": [ { "name": "南京市", "key": "N" }, { "name": "南昌市", "key": "N" }, { "name": "南寧市", "key": "N" }, { "name": "南充市", "key": "N" }, { "name": "南平市", "key": "N" }, { "name": "南通市", "key": "N" }, { "name": "南陽市", "key": "N" } , { "name": "那曲市", "key": "N" } , { "name": "內江市", "key": "N" } , { "name": "寧德市", "key": "N" } , { "name": "怒江市", "key": "N" } ], "P": [ { "name": "盤錦市", "key": "P" } , { "name": "攀枝花市", "key": "P" } , { "name": "平頂山市", "key": "P" } , { "name": "平涼市", "key": "P" } , { "name": "萍鄉市", "key": "P" } , { "name": "莆田市", "key": "P" } , { "name": "濮陽市", "key": "P" } ], "Q": [ { "name": "青島市", "key": "Q" }, { "name": "黔東南市", "key": "Q" }, { "name": "黔南市", "key": "Q" }, { "name": "黔西南市", "key": "Q" }, { "name": "慶陽市", "key": "Q" }, { "name": "清遠市", "key": "Q" }, { "name": "秦皇島市", "key": "Q" } , { "name": "欽州市", "key": "Q" } , { "name": "齊齊哈爾市", "key": "Q" } , { "name": "泉州市", "key": "Q" } , { "name": "曲靖市", "key": "Q" } , { "name": "衢州市", "key": "Q" } ], "R": [ { "name": "日喀則市", "key": "R" }, { "name": "日照市", "key": "R" } ] , "S": [ { "name": "上海市", "key": "S" }, { "name": "深圳市", "key": "S" }, { "name": "蘇州市", "key": "S" }, { "name": "瀋陽市", "key": "S" }, { "name": "石家莊市", "key": "S" }, { "name": "三門峽市", "key": "S" }, { "name": "三明市", "key": "S" } , { "name": "三亞市", "key": "S" } , { "name": "商洛市", "key": "S" } , { "name": "商丘市", "key": "S" } , { "name": "上饒市", "key": "S" } , { "name": "山南市", "key": "S" } , { "name": "汕頭市", "key": "S" } , { "name": "汕尾市", "key": "S" } , { "name": "韶關市", "key": "S" } , { "name": "紹興市", "key": "S" } , { "name": "邵陽市", "key": "S" } , { "name": "十堰市", "key": "S" } , { "name": "朔州市", "key": "S" } , { "name": "四平市", "key": "S" } , { "name": "綏化市", "key": "S" } , { "name": "遂寧市", "key": "S" } , { "name": "隨州市", "key": "S" } , { "name": "婁底市", "key": "S" } , { "name": "宿遷市", "key": "S" } , { "name": "宿州市", "key": "S" } ], "T": [ { "name": "天津市", "key": "T" }, { "name": "太原市", "key": "T" }, { "name": "泰安市", "key": "T" }, { "name": "泰州市", "key": "T" }, { "name": "唐山市", "key": "T" }, { "name": "天水市", "key": "T" }, { "name": "鐵嶺市", "key": "T" } , { "name": "銅川市", "key": "T" } , { "name": "通化市", "key": "T" } , { "name": "通遼市", "key": "T" } , { "name": "銅陵市", "key": "T" } , { "name": "銅仁市", "key": "T" } , { "name": "臺灣市", "key": "T" } ] , "W": [ { "name": "武漢市", "key": "W" }, { "name": "烏魯木齊市", "key": "W" }, { "name": "無錫市", "key": "W" }, { "name": "威海市", "key": "W" }, { "name": "濰坊市", "key": "W" }, { "name": "文山市", "key": "W" }, { "name": "溫州市", "key": "W" } , { "name": "烏海市", "key": "W" } , { "name": "蕪湖市", "key": "W" } , { "name": "烏蘭察布市", "key": "W" } , { "name": "武威市", "key": "W" } , { "name": "梧州市", "key": "W" } ], "X": [ { "name": "廈門市", "key": "X" }, { "name": "西安市", "key": "X" }, { "name": "西寧市", "key": "X" }, { "name": "襄樊市", "key": "X" }, { "name": "湘潭市", "key": "X" }, { "name": "湘西市", "key": "X" }, { "name": "咸寧市", "key": "X" } , { "name": "咸陽市", "key": "X" } , { "name": "孝感市", "key": "X" } , { "name": "邢臺市", "key": "X" } , { "name": "新鄉市", "key": "X" } , { "name": "信陽市", "key": "X" } , { "name": "新餘市", "key": "X" } , { "name": "忻州市", "key": "X" } , { "name": "西雙版納市", "key": "X" } , { "name": "宣城市", "key": "X" } , { "name": "許昌市", "key": "X" } , { "name": "徐州市", "key": "X" } , { "name": "香港市", "key": "X" } , { "name": "錫林郭勒市", "key": "X" } , { "name": "興安市", "key": "X" } ] , "Y": [ { "name": "銀川市", "key": "Y" }, { "name": "雅安市", "key": "Y" }, { "name": "延安市", "key": "Y" }, { "name": "延邊市", "key": "Y" }, { "name": "鹽城市", "key": "Y" }, { "name": "陽江市", "key": "Y" }, { "name": "陽泉市", "key": "Y" } , { "name": "揚州市", "key": "Y" } , { "name": "煙臺市", "key": "Y" } , { "name": "宜賓市", "key": "Y" } , { "name": "宜昌市", "key": "Y" } , { "name": "宜春市", "key": "Y" } , { "name": "營口市", "key": "Y" } , { "name": "益陽市", "key": "Y" } , { "name": "永州市", "key": "Y" } , { "name": "岳陽市", "key": "Y" } , { "name": "榆林市", "key": "Y" } , { "name": "運城市", "key": "Y" } , { "name": "雲浮市", "key": "Y" } , { "name": "玉樹市", "key": "Y" } , { "name": "玉溪市", "key": "Y" } , { "name": "玉林市", "key": "Y" } ], "Z": [ { "name": "雜多縣", "key": "Z" }, { "name": "贊皇縣", "key": "Z" }, { "name": "棗強縣", "key": "Z" }, { "name": "棗陽市市", "key": "Z" }, { "name": "棗莊市", "key": "Z" }, { "name": "澤庫縣", "key": "Z" }, { "name": "增城市市", "key": "Z" } , { "name": "曾都區市", "key": "Z" } , { "name": "澤普縣", "key": "Z" } , { "name": "澤州縣", "key": "Z" } , { "name": "札達縣", "key": "Z" } , { "name": "扎賚特旗市", "key": "Z" } , { "name": "扎蘭屯市市", "key": "Z" } , { "name": "扎魯特旗市", "key": "Z" } , { "name": "扎囊縣", "key": "Z" } , { "name": "張北縣", "key": "Z" } , { "name": "張店區市", "key": "Z" } , { "name": "章貢區市", "key": "Z" } , { "name": "張家港市", "key": "Z" } , { "name": "張家界市", "key": "Z" } , { "name": "張家口市", "key": "Z" } , { "name": "漳平市市", "key": "Z" } , { "name": "漳浦縣", "key": "Z" } , { "name": "章丘市市", "key": "Z" } , { "name": "樟樹市市", "key": "Z" } , { "name": "張灣區市", "key": "Z" }, { "name": "彰武縣", "key": "Z" }, { "name": "漳縣", "key": "Z" }, { "name": "張掖市", "key": "Z" }, { "name": "漳州市", "key": "Z" }, { "name": "長子縣", "key": "Z" } , { "name": "湛河區市", "key": "Z" } , { "name": "湛江市", "key": "Z" } , { "name": "站前區市", "key": "Z" } , { "name": "沾益縣", "key": "Z" } , { "name": "詔安縣", "key": "Z" }, { "name": "召陵區市", "key": "Z" }, { "name": "昭平縣", "key": "Z" }, { "name": "肇慶市", "key": "Z" }, { "name": "昭通市", "key": "Z" }, { "name": "趙縣", "key": "Z" } ] } ] } module.exports = city;
selectcity.js
//先引用城市資料檔案 var city = require('city.js') var lineHeight = 0; var endWords = ""; var isNum; Page({ data: { "hidden": true, cityName: "", //獲取選中的城市名 }, onLoad: function (options) { // 生命週期函式--監聽頁面載入 }, onReady: function () { // 生命週期函式--監聽頁面初次渲染完成 var cityChild = city.City[0]; console.log(cityChild) var that = this; wx.getSystemInfo({ success: function (res) { lineHeight = (res.windowHeight - 100) / 22; console.log(res.windowHeight - 100) that.setData({ city: cityChild, winHeight: res.windowHeight - 40, lineHeight: lineHeight }) } }) }, onShow: function () { // 生命週期函式--監聽頁面顯示 }, onHide: function () { // 生命週期函式--監聽頁面隱藏 }, onUnload: function () { // 生命週期函式--監聽頁面解除安裝 }, //觸發全部開始選擇 chStart: function () { this.setData({ trans: ".3", hidden: false }) }, //觸發結束選擇 chEnd: function () { this.setData({ trans: "0", hidden: true, scrollTopId: this.endWords }) }, //獲取文字資訊 getWords: function (e) { var id = e.target.id; this.endWords = id; isNum = id; this.setData({ showwords: this.endWords }) }, //設定文字資訊 setWords: function (e) { var id = e.target.id; this.setData({ scrollTopId: id }) }, // 滑動選擇城市 chMove: function (e) { var y = e.touches[0].clientY; var offsettop = e.currentTarget.offsetTop; var height = 0; var that = this;; var cityarr = ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"] // 獲取y軸最大值 wx.getSystemInfo({ success: function (res) { height = res.windowHeight - 10; } }); //判斷選擇區域,只有在選擇區才會生效 if (y > offsettop && y < height) { // console.log((y-offsettop)/lineHeight) var num = parseInt((y - offsettop) / lineHeight); endWords = cityarr[num]; // 這裡 把endWords 繫結到this 上,是為了手指離開事件獲取值 that.endWords = endWords; }; //去除重複,為了防止每次移動都賦值 ,這裡限制值有變化後才會有賦值操作, //DOTO 這裡暫時還有問題,還是比較卡,待優化 if (isNum != num) { // console.log(isNum); isNum = num; that.setData({ showwords: that.endWords }) } }, //選擇城市,並讓選中的值顯示在文字框裡 bindCity: function (e) { var cityName = e.currentTarget.dataset.city; var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一個頁面 //直接呼叫上一個頁面的setData()方法,把資料存到上一個頁面中去 prevPage.setData({ cityName: cityName }) wx.navigateBack() // wx.navigateBack({ // url: '/pages/home/search/index' // }) } })
selectcity.wxml
<!--index.wxml--> <!-- <view class="title"> <input class="title_list" value="{{cityName}}" placeholder="城市名稱" /> <button>確認</button> </view> --> <scroll-view scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list"> <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> <text id="{{idx}}" class="list_tit">{{idx}}</text> <block wx:for="{{cityName}}"> <view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view> </block> </block> </scroll-view> <!--城市選擇列表--> <view class="scroll_list" bindtouchstart="chStart" bindtouchend="chEnd" catchtouchmove="chMove" style="background: rgba(0,0,0,{{trans}});"> <block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> <block wx:if="{{idx != '熱門城市'}}"> <view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view> </block> </block> </view> <!--選擇顯示--> <view hidden="{{hidden}}" class="showwords"> {{showwords}} </view>
selectcity.wxss
/* pages/home/selectcity/selectcity.wxss */ /**index.wxss**/ .title { position: relative; padding: 10px 0; } .title_list { display: inline-block; padding: 0 15px; height: 20px; line-height: 20px; font-size: 16px; } .title button { width: 50px; height: 30px; font-size: 16px; padding: 0; line-height: 30px; margin: auto; position: absolute; top: 0; bottom:0; right: 10px; background: none; } .title button::after { border: none; } .title_list:nth-child(1) { border-right:1px #ccc solid; } /*城市列表*/ .city_list { position: relative; } /*城市選擇頭部*/ .list_tit { display: block; line-height: 40px; height: 40px; padding-left: 15px; font-size: 16ppx; background: #f5f5f5; color: #666; } .list_con { height: 40px; /*border-top: 1px #f5f5f5 solid ;*/ line-height: 40px; font-size: 16px; padding-left: 15px; } .list_con::before { content: " "; height: 1px; border-top: 1px #f5f5f5 solid; position: absolute; width: 100%; } .list_con::before:nth-child(1) { border: none; } /*城市選擇 右邊*/ .scroll_list { background: rgba(0,0,0,0); position: absolute; height: calc(100% - 100px); width: 25px; top: 90px; right: 10px; } .scroll_list_chi { /*border: 1px blue solid;*/ text-align: center; font-size: 12px; } /*顯示框*/ .showwords { width: 80px; height: 80px; background: rgba(0,0,0,.3); border-radius:50%; line-height: 80px; text-align: center; font-size:10vw; margin: auto; position: absolute; top: 0;left: 0;bottom: 0;right: 0; z-index: 999; }