この記事では、主に 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 を作成します
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; }
3. Pages->index フォルダーに JS ファイルを作成します。新しい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ファイルを作成します
具体的なコードは次のとおりです:
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 中国語 Web サイトをご覧ください。
関連する推奨事項:
ピッカーを使用して、WeChat ミニ プログラムで省と都市の間の 3 レベルの連携の実装をカプセル化する美団市の選択を模倣した WeChat ミニ プログラムの実装
以上がWeChatアプレットは文字に基づいて都市を選択する機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SublimeText3 中国語版
中国語版、とても使いやすい

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

Dreamweaver Mac版
ビジュアル Web 開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
