微信小程序二级联动省市

最新推荐文章于 2024-03-13 11:37:54 发布

安妮的小熊提伯斯

最新推荐文章于 2024-03-13 11:37:54 发布

阅读量3k

点赞数

文章标签：微信布局

本文链接：https://blog.csdn.net/qq_26014653/article/details/75019518

版权

本文介绍了如何在微信小程序中创建二级联动的省市选择功能。首先展示了实现效果，然后详细讲解了布局文件的设计，包括一个隐藏弹框和点击触发的按钮。接着，通过JS代码演示了点击按钮时如何弹出选择框，加载省列表，再根据省的选择获取市的列表。最后，提供了项目在CSDN和GitHub上的下载链接。

摘要由CSDN通过智能技术生成

1.先看一下效果

2.先看下一下布局文件

布局有一个弹框和点击按钮组成，弹框为隐藏，点击可以弹出选择城市

<!--城市选择弹框start-->
<view class="location-select" wx:if="{
  {pickerInfo.state == true}}">
  <view class="location-picker">
    <view class="location-picker-top flex-center-center">
      {
  {pickerInfo.title}}
    </view>
    <picker-view class="location-picker-view" value="{
  {pickerInfo.value}}" indicator-style="height: 50px;" bindchange="updatePicker">
      <picker-view-column>
        <view wx:for="{
  {pickerInfo.provinces}}" class="picker-province-item">
          {
  {item.provinceName}}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{
  {pickerInfo.citys}}" class="picker-city-item">
          {
  {item.cityName}}
        </view>