harmong2.0—组件:picker省市区三级联动

picker是一种滑动选择组件,在一些app的选择地址中很常用。

  • 思路:省市区联动需要三个picker组件。先拿到数据,把默认的省市区展示出来。然后添加picker的值改变事件,滑动省,省对应的市会在第二个picker中展示出来,同时,市对应的区也会对应刷新展示。

  • 实现效果(数据暂时用手动添加集合的形式展示):

省市区联动
大概效果就这样。

  • 主要代码:
// 记录当前选择的是哪个省,需要根据它获取对应的市
int proIn = 0;

@Override
public void onValueChanged(Picker picker, int oldV, int newV) {
    if (picker == province) {
        Province chooseProvince = provinceList.get(newV);
        proIn = newV;
        // 省变了,是要跟着变
        city.setMaxValue(chooseProvince.getCitys().size() - 1);
        city.setFormatter(i -> chooseProvince.getCitys().get(i).getName());
        city.setValue(0);//setValue(0):默认展示第一个
        // 省变了,区也要跟着变
        district.setMaxValue(chooseProvince.getCitys().get(0).getDistricts().size() - 1);
        district.setFormatter(chooseProvince.getCitys().get(0).getDistricts()::get);
        district.setValue(0);
    }
    if (picker == city) {
        City chooseCity = provinceList.get(proIn).getCitys().get(newV);
        district.setMaxValue(chooseCity.getDistricts().size() - 1);
        district.setFormatter(chooseCity.getDistricts()::get);
        district.setValue(0);
    }
}

完整代码请前往Github–>https://github.com/roydonGuo/Picker-ThreeArea

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
可以通过使用uview组件来实现uni picker省市区三级联动。这个组件可以在uniapp中使用,并且已经封装好了数据的渲染和传递功能。你可以使用template模板语法将数据从页面中传递给uview组件,然后通过Ajax请求从后台获取省市区的数据,将其渲染到picker组件中,并将选择的省市区的code码拼接后传递给后台实现需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使用picker封装省市区三级联动模板](https://download.csdn.net/download/weixin_38642636/16215282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [uniapp使用uview组件实现省市区三级联动](https://download.csdn.net/download/m0_62676565/85819519)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [uniapp picker组件实现省市区三级联动效果](https://blog.csdn.net/weixin_45356397/article/details/119701421)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

roydon_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值