微信小程序使用picker封装省市区三级联动实例代码_van-area - CSDN文库

picker封装省市区三级联动

微信小程序

108 浏览量更新于2023-03-03 评论收藏 150KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序微信小程序使用使用picker封装省市区三级联动实例代码封装省市区三级联动实例代码

主要介绍了微信小程序使用picker封装省市区三级联动实例代码的相关资料,需要的朋友可以参考下

微信小程序使用picker封装省市区三级联动实例

目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式

只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么

我的思路是这样的：

1、使用、使用template模板语法进行封装，数据从页面传入模板语法进行封装，数据从页面传入

2、根据、根据picker组件的语法组件的语法，range只能是一组中文地区数组，但是我们需要每个地区的唯一码来触发下一级联动数据。这

样，我的做法是通过一个对象里面的两组数据分表存储中文名和唯一码的两个对象数组。格式【province:{code:['110000',

'220000'...], name: ['北京市', '天津市'...]}】，这个格式是固定的，需要服务端配合返回

3、通过、通过picker的的bindchange事件来获取下一级的数据，每个方法都写入函数中在暴露出来供页面调用事件来获取下一级的数据，每个方法都写入函数中在暴露出来供页面调用

然后讲下我demo的目录结构：

common

-net.js//wx.request请求接口二次整合

-cityTemplate.js//三级联动方法

page

-demo

-demo.js

-demo.wxml

template

-cityTemplate.wxml

app.js

app.json

app.wxss

然后，使用phpstudy搭建了简单的服务端供测试。不要问我服务端的为啥是这样的，我也不懂，刚入门我只要数据...

当然你可以省掉这一步，将数据直接固定在demo.js里面进行测试...

代码如下：【服务端的返回数据格式是遵循了下面的retArr的规范的】

<?php

header("Content-type: text/html; charset=utf-8");

$type=$_REQUEST["type"];//获取省市区的标志

$fcode=$_GET["fcode"];

$retArr=[

"status"=>true,

"data"=>[],

"msg"=>""

];

if($type!="province" && $type!="city" && $type!="county"){

$retArr["status"]=false;

$retArr["msg"]="获取地区类型错误，请检查";

echo json_encode($retArr);

exit;

}

function getProvince(){

$province=[];

$code=["110000", "350000", "710000"];

$province["code"]=$code;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

weixin_38731199

粉丝: 6
资源: 928

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈