您好,登錄后才能下訂單哦!
今天開發(fā)一個(gè)小程序,里面涉及到區(qū)域選擇,看了網(wǎng)上的一些版本,感覺寫的不全,有可能是我的理解能力還不夠吧。今天我就結(jié)合網(wǎng)上的答案,在根據(jù)自己的需求,重新整理一份。希望對(duì)大家有幫助。先看看截圖:
項(xiàng)目截圖
下面我們把代碼梳理一下。
一、創(chuàng)建index.wxml文件
在pages->index文件夾下,新建index.wxml文件,代碼如下:
class="title"> class="title_list" value="{{cityName}}" placeholder="城市名稱" /> 確認(rèn) scroll-y="true" scroll-into-view="{{scrollTopId}}" class="city_list"> wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> id="{{idx}}" class="list_tit">{{idx}} wx:for="{{cityName}}"> class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}} class="scroll_list" bindtouchstart="chStart" bindtouchend="chEnd" catchtouchmove="chMove" > wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> wx:if="{{idx != '熱門城市'}}"> id="{{idx}}" class="scroll_list_chi" bindtouchstart="getWords" bindtouchend="setWords">{{idx}} hidden="{{hidden}}" class="showwords"> {{showwords}}
二、創(chuàng)建對(duì)應(yīng)的CSS
在pages->index文件夾下,新建index.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; }
三、創(chuàng)建JS文件
在pages->index文件夾下,新建index.js文件,代碼如下:
//先引用城市數(shù)據(jù)文件 var city = require('../../utils/city.js') var lineHeight = 0; var endWords = ""; var isNum; Page({ data: { "hidden": true, cityName:"", //獲取選中的城市名 }, onLoad: function (options) { // 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 }, onReady: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 var cityChild = city.City[0]; 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 () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 }, onHide: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 }, onUnload: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 }, //觸發(fā)全部開始選擇 chStart: function () { this.setData({ trans: ".3", hidden: false }) }, //觸發(fā)結(jié)束選擇 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 }) }, //設(shè)置文字信息 setWords: function (e) { var id = e.target.id; this.setData({ scrollTopId: id }) }, // 滑動(dòng)選擇城市 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; } }); //判斷選擇區(qū)域,只有在選擇區(qū)才會(huì)生效 if (y > offsettop && y < height) { // console.log((y-offsettop)/lineHeight) var num = parseInt((y - offsettop) / lineHeight); endWords = cityarr[num]; // 這里 把endWords 綁定到this 上,是為了手指離開事件獲取值 that.endWords = endWords; }; //去除重復(fù),為了防止每次移動(dòng)都賦值 ,這里限制值有變化后才會(huì)有賦值操作, //DOTO 這里暫時(shí)還有問題,還是比較卡,待優(yōu)化 if (isNum != num) { // console.log(isNum); isNum = num; that.setData({ showwords: that.endWords }) } }, //選擇城市,并讓選中的值顯示在文本框里 bindCity: function(e) { console.log(e); var cityName = e.currentTarget.dataset.city; this.setData({ cityName: cityName }) } })
四、創(chuàng)建城市文件
在utils文件夾里創(chuàng)建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": "安陽(yáng)", "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": "畢節(jié)", "key": "B" } , { "name": "濱州", "key": "B" } , { "name": "百色", "key": "B" } , { "name": "亳州", "key": "B" } ], "C": [ { "name": "重慶", "key": "C" }, { "name": "成都", "key": "C" }, { "name": "長(zhǎng)沙", "key": "C" }, { "name": "長(zhǎng)春", "key": "C" }, { "name": "滄州", "key": "C" }, { "name": "常德", "key": "C" }, { "name": "昌都", "key": "C" } , { "name": "長(zhǎng)治", "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": "朝陽(yáng)", "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": "德陽(yáng)", "key": "D" } , { "name": "德州", "key": "D" } , { "name": "定西", "key": "D" } , { "name": "迪慶", "key": "D" } , { "name": "東營(yíng)", "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": "阜陽(yáng)", "key": "F" } ] , "G": [ { "name": "廣州", "key": "G" }, { "name": "贛州", "key": "G" }, { "name": "桂林", "key": "G" }, { "name": "貴陽(yáng)", "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": "衡陽(yáng)", "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": "濟(jì)南", "key": "J" }, { "name": "佳木斯", "key": "J" }, { "name": "吉安", "key": "J" }, { "name": "江門", "key": "J" }, { "name": "焦作", "key": "J" }, { "name": "嘉興", "key": "J" }, { "name": "嘉峪關(guān)", "key": "J" } , { "name": "揭陽(yáng)", "key": "J" } , { "name": "吉林", "key": "J" } , { "name": "金昌", "key": "J" } , { "name": "晉城", "key": "J" } , { "name": "景德鎮(zhèn)", "key": "J" } , { "name": "荊門", "key": "J" } , { "name": "荊州", "key": "J" } , { "name": "金華", "key": "J" } , { "name": "濟(jì)寧", "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": "遼陽(yáng)", "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": "洛陽(yáng)", "key": "L" }, { "name": "瀘州", "key": "L" }, { "name": "呂梁", "key": "L" } ], "M": [ { "name": "馬鞍山", "key": "M" } , { "name": "茂名", "key": "M" } , { "name": "眉山", "key": "M" } , { "name": "梅州", "key": "M" } , { "name": "綿陽(yáng)", "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": "南陽(yáng)", "key": "N" } , { "name": "那曲", "key": "N" } , { "name": "內(nèi)江", "key": "N" } , { "name": "寧德", "key": "N" } , { "name": "怒江", "key": "N" } ], "P": [ { "name": "盤錦", "key": "P" } , { "name": "攀枝花", "key": "P" } , { "name": "平頂山", "key": "P" } , { "name": "平?jīng)?, "key": "P" } , { "name": "萍鄉(xiāng)", "key": "P" } , { "name": "莆田", "key": "P" } , { "name": "濮陽(yáng)", "key": "P" } ], "Q": [ { "name": "青島", "key": "Q" }, { "name": "黔東南", "key": "Q" }, { "name": "黔南", "key": "Q" }, { "name": "黔西南", "key": "Q" }, { "name": "慶陽(yáng)", "key": "Q" }, { "name": "清遠(yuǎn)", "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": "沈陽(yáng)", "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": "韶關(guān)", "key": "S" } , { "name": "紹興", "key": "S" } , { "name": "邵陽(yáng)", "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": "臺(tái)灣", "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": "咸陽(yáng)", "key": "X" } , { "name": "孝感", "key": "X" } , { "name": "邢臺(tái)", "key": "X" } , { "name": "新鄉(xiāng)", "key": "X" } , { "name": "信陽(yáng)", "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": "陽(yáng)江", "key": "Y" }, { "name": "陽(yáng)泉", "key": "Y" } , { "name": "揚(yáng)州", "key": "Y" } , { "name": "煙臺(tái)", "key": "Y" } , { "name": "宜賓", "key": "Y" } , { "name": "宜昌", "key": "Y" } , { "name": "宜春", "key": "Y" } , { "name": "營(yíng)口", "key": "Y" } , { "name": "益陽(yáng)", "key": "Y" } , { "name": "永州", "key": "Y" } , { "name": "岳陽(yáng)", "key": "Y" } , { "name": "榆林", "key": "Y" } , { "name": "運(yùn)城", "key": "Y" } , { "name": "云浮", "key": "Y" } , { "name": "玉樹", "key": "Y" } , { "name": "玉溪", "key": "Y" } , { "name": "玉林", "key": "Y" } ], "Z": [ { "name": "雜多縣", "key": "Z" }, { "name": "贊皇縣", "key": "Z" }, { "name": "棗強(qiáng)縣", "key": "Z" }, { "name": "棗陽(yáng)市", "key": "Z" }, { "name": "棗莊", "key": "Z" }, { "name": "澤庫(kù)縣", "key": "Z" }, { "name": "增城市", "key": "Z" } , { "name": "曾都區(qū)", "key": "Z" } , { "name": "澤普縣", "key": "Z" } , { "name": "澤州縣", "key": "Z" } , { "name": "札達(dá)縣", "key": "Z" } , { "name": "扎賚特旗", "key": "Z" } , { "name": "扎蘭屯市", "key": "Z" } , { "name": "扎魯特旗", "key": "Z" } , { "name": "扎囊縣", "key": "Z" } , { "name": "張北縣", "key": "Z" } , { "name": "張店區(qū)", "key": "Z" } , { "name": "章貢區(qū)", "key": "Z" } , { "name": "張家港", "key": "Z" } , { "name": "張家界", "key": "Z" } , { "name": "張家口", "key": "Z" } , { "name": "漳平市", "key": "Z" } , { "name": "漳浦縣", "key": "Z" } , { "name": "章丘市", "key": "Z" } , { "name": "樟樹市", "key": "Z" } , { "name": "張灣區(qū)", "key": "Z" }, { "name": "彰武縣", "key": "Z" }, { "name": "漳縣", "key": "Z" }, { "name": "張掖", "key": "Z" }, { "name": "漳州", "key": "Z" }, { "name": "長(zhǎng)子縣", "key": "Z" } , { "name": "湛河區(qū)", "key": "Z" } , { "name": "湛江", "key": "Z" } , { "name": "站前區(qū)", "key": "Z" } , { "name": "沾益縣", "key": "Z" } , { "name": "詔安縣", "key": "Z" }, { "name": "召陵區(qū)", "key": "Z" }, { "name": "昭平縣", "key": "Z" }, { "name": "肇慶", "key": "Z" }, { "name": "昭通", "key": "Z" }, { "name": "趙縣", "key": "Z" } ] } ] } module.exports = city;
以上就是全部代碼,大家可以再自己的項(xiàng)目中部署。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。