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

264 阅读1分钟

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

一、前言

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

二、效果预览

1753434960393.jpg 1753597936121(1).jpg 1753434939458.jpg

三、插件使用

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

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

4.jpg

第二步、在页面中使用

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

  <!-- 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>

四、部分代码展示

区划点击事件

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

五、说明

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

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