이 글은 주로 WeChat 애플릿의 문자를 기반으로 도시를 선택하는 관련 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
오늘은 일부 버전을 읽은 후 작은 프로그램을 개발했습니다. 인터넷에서는 글이 불완전하다고 생각합니다. 어쩌면 내 이해가 충분하지 않은 것 같습니다. 오늘은 인터넷에 있는 답변을 모아서 제 필요에 맞게 재구성하겠습니다. 그것이 모두에게 도움이 되기를 바랍니다. 먼저 스크린샷을 살펴보겠습니다.
프로젝트 스크린샷
아래 코드를 정리해 보겠습니다.
1. index.wxml 파일 생성
pages->index 폴더에서 다음 코드를 사용하여 새 index.wxml 파일을 생성합니다.
class="title"> class="title_list" value="{{cityName}}" placeholder="城市名称" /> 确认 scroll-y="true" style="height: {{winHeight}}px;" 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" style="background: rgba(0,0,0,{{trans}});" > wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName"> wx:if="{{idx != '热门城市'}}"> 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}} hidden="{{hidden}}" class="showwords"> {{showwords}}
2. 해당 CSS 생성
페이지->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; }
3 JS 파일을 만듭니다.
pages->index 폴더에 다음을 만듭니다. 새로운 index.js 파일을 생성합니다. 코드는 다음과 같습니다.
//先引用城市数据文件 var city = require('../../utils/city.js') var lineHeight = 0; var endWords = ""; var isNum; Page({ data: { "hidden": true, cityName:"", //获取选中的城市名 }, onLoad: function (options) { // 生命周期函数--监听页面加载 }, onReady: function () { // 生命周期函数--监听页面初次渲染完成 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 () { // 生命周期函数--监听页面显示 }, 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) { console.log(e); var cityName = e.currentTarget.dataset.city; this.setData({ cityName: cityName }) } })
4. city 파일을 생성합니다.
utils 폴더에 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;
위의 코드는 모두 코드이며, 프로젝트에 배포하여 직접 추가할 수 있습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위챗 미니 프로그램에서 성, 도시 간 3단계 연결 구현을 캡슐화하기 위해 선택기 사용
위 내용은 WeChat 애플릿은 문자를 기반으로 도시를 선택하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版
시각적 웹 개발 도구

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
