uni-app区域选择、支持静态、动态数据

996幸存者2025-07-27 17:27

插件地址：ext.dcloud.net.cn/plugin?id=2...

一、前言

在做小程序、H5、uni-app开发中，经常会用到区域选择，今天给大家分享一个我自己封装的插件，使用方便，支持三种数据源：静态tree数据、静态列表数据、动态懒加载数据

二、效果预览

三、插件使用

第一步、下载插件导入项目

该插件是uni-modules规范插件，导入后可以直接使用，无需在项目中声明组件

第二步、在页面中使用

根据自己的需求使用相应功能

xml 复制代码

  <!-- dataType:2 懒加载数据 -->
  <sjx-area-select style="min-height: 100px;" v-if="isShow" :areaArr="firstArea" @areaClick='getArea'
      areaName="name" areaNumber="code" :dataType="2" :requestData="requestData" hasChild="hasChildss"
      id='temid'></sjx-area-select>

四、部分代码展示

区划点击事件

kotlin 复制代码

/* item--当前项；areaName--当前区划名；areaNameArr--全区划数组；areaNumber--当前区划代码；isLeaf--是否是最后一级 */
getAreaTree(item, areaName, areaNameArr, areaNumber, isLeaf) {
    this.areaName = areaName
    this.areaNumber = areaNumber
    this.areaFullName = areaNameArr.join('')
    this.isShowStatic = !isLeaf
}

五、说明

插件地址中有完整使用说明和案例，有需要的小伙伴可以去看看。

小伙伴在使用过程中遇到任何问题或发现功能不足的地方，欢迎随时留言反馈，您的宝贵意见将帮助我持续完善插件功能，在此衷心感谢您的支持与帮助！