微信小程序省市合作功能（微信小程序省市三级合作）

最近，我们创建了一个连接农村和城市的功能。 今天看到有人问如何做到这一点，所以我想我应该发布并分享我所做的事情。

首先我们看一下效果。 点击文字“点击”，会弹出一个选择窗口，点击“取消”或“确定”（“取消”和“确定”按钮在选择框上方，截图有点模糊）。 车窗将会滑下。

为此，使用组件选取器 - 视图。 接下来我们看一下picker-view的属性。

现在开始编写 wxml 代码。 现在，在此处插入您作为模板编写的句子。 首先我们看一下目录结构。

我们先看一下级联的代码。 wxml:

取消 确认 <picker-view[k3 |                                        Column>下面是cascade.wxss的代码。

.cascade_box{ 字体-尺寸：28rpx；宽度：100%；位置：固定；底部：0；}.cascade_hei{ 宽度：100%； : #000; 不透明度: 0.5;}.cascade_find{ 宽度: 100%; 位置: 相对; /*底部: 0;*/ 背景: #fff; : 块; 宽度: 100rpx; 行-高度: 80rpx; /*背景: #00f;*/ 文本-对齐: 颜色: # 0f0;}.queren{ : 0; 顶部: 0;}.cascade_header{ 高度: 80rpx; 宽度: 100%;margin-bottom: 20rpx;}

好的。 此处描述了该模板。 接下来是参考。 参考资料非常简单。

第一个是对 las.wxml 的引用。

p >点击

省份：{{jieguo.sheng}}
市：{{jieguo.shi}}
地区：{{jieguo.qu}}

然后有一个对 las.wxss 的引用（你没看错）：

@import '../ ../ teml/cascade.wxss';

下一步是 JS：

我们首先讨论存储州和城市名称的 json 文件格式。 这个JSON文件还包含全国各省市的名称（这里仅以北京为例）。 这是我请求的数据的示例。 JS 必须根据请求的数据做出决策）：

{ "regions": [{ "id": 110000, "name": "北京", "regions": [{ "id": 110100, "name": "北京", "regions" :[{ "id": 110101 , "name": "东城区" }, { "id": 110102, "name": "西城区" }, { "id": 110103, "name": "崇文区" }, { "id" : 110104, "name": "宣武区" }, { "id": 110105, "name": "朝阳区" }, { "id": 110106, "id""name": "丰台区" }, { "id": 110107, "name": "石景山区" }, { "id": 110108 , "name": "海淀区" "name": "海淀区" "name": "海淀区" , "name": "门斗沟区" }, { "id": 110111, "name": "房山区" }, { "id": 110112, "name": "通州区" " }, { "id": 110113, "name": "顺义区" }, { "id": 110114, "name": "昌平区" }, {                                "id": 110115, "name": "大兴区" }, { "id": 110116, "name": "怀柔区" }, { "id": 110117, "name": "平谷区" }, { "id": 110228, "name": "密云县" }, { "id": 110229, "name": "颜清贤" }], "pinyin": "北京", "hot": true , "市政府": true }]}

操作数据的las.js如下

Page({ data: { sheng: [],//shi: 各地市获取的[], //全部citys Selected state's qu: [], //选择城市的所有区县 sheng_index:0,//显示picker-州项选择的值Value shi_index:0,//picker-查看城市项选择的值 qu_index:0,//picker-查看区县项选择的值盛世:null,//任何有数据的获取省份和jieguo的市区数据:{},//获取省名和城市姓 AnimeData: {} },//点击事件，点击后弹出选择页面 dianji:function( ){//动画这里会写成 Change the height For fullscreen var Anime = wx.createAnimation({duration:500,timingFunction:'ease', }) this.animation =animation Anime.height( 1332+'rpx ').step() this. setData({animeData:animation.export() }) this.animation = 动画anime.height(0+'rpx').step() this.setData({animeData:animation.export()}); //取消而不传递任何值。 这里我们将jieguo的值赋给{} this.setData({ jieguo:{} })。 console.log(this.data.jieguo); },//确认按钮 queren :function(){ //同样的动画。 级联选择页面消失。 效果与取消相同。 var Anime = wx.createAnimation({duration:500,timingFunction:'ease', }) this.animation = Anime Anime.height( 0+'rpx').step() this.setData({ AnimeData:animation.export( ) });//输出上次选择的结果 console.log(this.data) .jiegu); picker-view-k3]view 的当前选中项 const val = e.detail .valuethis.setData({ sheng_index: val[0], shi_index: val[1], qu_index: val[2] } ) this.jilian(); console.log(this.data.jieguo); // 点击这里确定地市名对称表示 jilian:function(){ var that=this, shengshi=that.data.shengshi, sheng=[], shi=[], qu=[], qu_index=that.data.qu_index, shi_index=that.data 。 shi_index, sheng_index = that.data.Sheng_index; // 遍历所有地市，将地市名称保存到sheng数组中(let i = 0; I

推荐教程："微信小程序》

下载微信应用 微信是一款移动通讯软件，可让您发送消息、视频、照片和文字，允许您单独或群组聊天，甚至可以根据您的地理位置查找附近的人，需要的朋友可以保存并下载体验。

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序省市合作功能（微信小程序省市三级合作） https://zhujicankao.com/123699.html