uniapp使用uview组件实现省市区三级联动_uview多级联动资源-CSDN下载

共2个文件

vue：1个

js：1个

uni-app

uview

vue.js

3星 · 超过75%的资源需积分: 21 92 浏览量 2022-06-29 09:24:16 上传评论 6 收藏 30KB RAR 举报

在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。uView UI组件库则为uni-app提供了丰富的UI组件，使得开发者可以快速构建美观且功能齐全的应用。我们需要在项目中安装uView组件库。如果你还没有安装，可以通过以下命令在项目根目录下执行： ```bash npm i uview-ui -S ``` 安装完成后，在`main.js`文件中引入uView，并配置全局注册： ```javascript import uView from 'uview-ui'; import Vue from 'vue'; Vue.use(uView); ``` 接下来，我们来创建省市区三级联动的组件。这个组件主要包含三个下拉选择器，每个选择器分别对应省份、城市和区县，它们的数据将通过API获取或者预先定义好的数据进行填充。这里假设我们已经有一个名为`areas.json`的文件，包含了所有省市区的数据。在`areas.json`中，数据结构可能如下所示： ```json { "province": [ {"id": "1", "name": "北京市"}, {"id": "2", "name": "上海市"} ], "city": { "1": [ {"id": "11", "name": "北京市市辖区", "parentId": "1"}, {"id": "12", "name": "北京市郊县", "parentId": "1"} ], "2": [ {"id": "21", "name": "上海市市辖区", "parentId": "2"}, {"id": "22", "name": "上海市郊县", "parentId": "2"} ] }, "district": { "11": [ {"id": "1101", "name": "东城区", "parentId": "11"}, {"id": "1102", "name": "西城区", "parentId": "11"} ], // ... } } ``` 然后创建一个名为`AreaSelector.vue`的组件文件，内容如下： ```html <template> <view class="area-selector"> <u-select v-model="provinceId" @on-change="getCityList"> <u-option v-for="(item, index) in provinces" :key="index" :value="item.id" :label="item.name"></u-option> </u-select> <u-select v-model="cityId" @on-change="getDistrictList"> <u-option v-for="(item, index) in cities" :key="index" :value="item.id" :label="item.name"></u-option> </u-select> <u-select v-model="districtId"> <u-option v-for="(item, index) in districts" :key="index" :value="item.id" :label="item.name"></u-option> </u-select> </view> </template> <script> export default { data() { return { provinceId: '', cityId: '', districtId: '', provinces: [], cities: [], districts: [] }; }, created() { this.getProvinceList(); }, methods: { getProvinceList() { // 从areas.json文件或API获取省份数据并赋值给provinces }, getCityList(provinceId) { this.cityId = ''; this.districtId = ''; this.cities = []; // 根据provinceId从areas.json文件或API获取城市数据并赋值给cities }, getDistrictList(cityId) { this.districtId = ''; this.districts = []; // 根据cityId从areas.json文件或API获取区县数据并赋值给districts } } }; </script> ``` 在`created`生命周期钩子中，我们调用`getProvinceList`方法获取省份数据，并在每次选择省份或城市时更新城市和区县的列表。这样，当用户在省市区选择器中切换时，相应的下拉菜单会自动更新，实现联动效果。在实际项目中，可能需要根据实际情况调整数据来源，例如从远程API获取数据。此外，为了提高用户体验，可以添加加载提示和错误处理机制。 uni-app结合uView组件库，我们可以轻松实现省市区三级联动的功能。通过合理组织数据和使用uView提供的选择器组件，可以构建出高效、易用的界面，大大简化了开发过程。在实际开发过程中，还要注意代码的可维护性和适应性，以满足不同场景下的需求。

资源详情

资源评论

资源推荐

收起资源包目录

uniapp+uview实现三级联动Demo.rar （2个子文件）

uniapp+uview实现三级联动Demo

address.js 219KB

invite.vue 3KB

export const address= [{ "code": "110000", "value": "北京市", "children": [{ "code": "110100", "value": "北京市", "children": [{ "code": "110101", "value": "东城区" }, { "code": "110102", "value": "西城区" }, { "code": "110105", "value": "朝阳区" }, { "code": "110106", "value": "丰台区" }, { "code": "110107", "value": "石景山区" }, { "code": "110108", "value": "海淀区" }, { "code": "110109", "value": "门头沟区" }, { "code": "110111", "value": "房山区" }, { "code": "110112", "value": "通州区" }, { "code": "110113", "value": "顺义区" }, { "code": "110114", "value": "昌平区" }, { "code": "110115", "value": "大兴区" }, { "code": "110116", "value": "怀柔区" }, { "code": "110117", "value": "平谷区" }, { "code": "110118", "value": "密云区" }, { "code": "110119", "value": "延庆区" }] }] }, { "code": "120000", "value": "天津市", "children": [{ "code": "120100", "value": "天津市", "children": [{ "code": "120101", "value": "和平区" }, { "code": "120102", "value": "河东区" }, { "code": "120103", "value": "河西区" }, { "code": "120104", "value": "南开区" }, { "code": "120105", "value": "河北区" }, { "code": "120106", "value": "红桥区" }, { "code": "120110", "value": "东丽区" }, { "code": "120111", "value": "西青区" }, { "code": "120112", "value": "津南区" }, { "code": "120113", "value": "北辰区" }, { "code": "120114", "value": "武清区" }, { "code": "120115", "value": "宝坻区" }, { "code": "120116", "value": "滨海新区" }, { "code": "120117", "value": "宁河区" }, { "code": "120118", "value": "静海区" }, { "code": "120119", "value": "蓟州区" }] }] }, { "code": "130000", "value": "河北省", "children": [{ "code": "130100", "value": "石家庄市", "children": [{ "code": "130102", "value": "长安区" }, { "code": "130104", "value": "桥西区" }, { "code": "130105", "value": "新华区" }, { "code": "130107", "value": "井陉矿区" }, { "code": "130108", "value": "裕华区" }, { "code": "130109", "value": "藁城区" }, { "code": "130110", "value": "鹿泉区" }, { "code": "130111", "value": "栾城区" }, { "code": "130121", "value": "井陉县" }, { "code": "130123", "value": "正定县" }, { "code": "130125", "value": "行唐县" }, { "code": "130126", "value": "灵寿县" }, { "code": "130127", "value": "高邑县" }, { "code": "130128", "value": "深泽县" }, { "code": "130129", "value": "赞皇县" }, { "code": "130130", "value": "无极县" }, { "code": "130131", "value": "平山县" }, { "code": "130132", "value": "元氏县" }, { "code": "130133", "value": "赵县" }, { "code": "130181", "value": "辛集市" }, { "code": "130183", "value": "晋州市" }, { "code": "130184", "value": "新乐市" }] }, { "code": "130200", "value": "唐山市", "children": [{ "code": "130202", "value": "路南区" }, { "code": "130203", "value": "路北区" }, { "code": "130204", "value": "古冶区" }, { "code": "130205", "value": "开平区" }, { "code": "130207", "value": "丰南区" }, { "code": "130208", "value": "丰润区" }, { "code": "130209", "value": "曹妃甸区" }, { "code": "130224", "value": "滦南县" }, { "code": "130225", "value": "乐亭县" }, { "code": "130227", "value": "迁西县" }, { "code": "130229", "value": "玉田县" }, { "code": "130281", "value": "遵化市" }, { "code": "130283", "value": "迁安市" }, { "code": "130284", "value": "滦州市" }] }, { "code": "130300", "value": "秦皇岛市", "children": [{ "code": "130302", "value": "海港区" }, { "code": "130303", "value": "山海关区" }, { "code": "130304", "value": "北戴河区" }, { "code": "130306", "value": "抚宁区" }, { "code": "130321", "value": "青龙满族自治县" }, { "code": "130322", "value": "昌黎县" }, { "code": "130324", "value": "卢龙县" }] }, { "code": "130400", "value": "邯郸市", "children": [{ "code": "130402", "value": "邯山区" }, { "code": "130403", "value": "丛台区" }, { "code": "130404", "value": "复兴区" }, { "code": "130406", "value": "峰峰矿区" }, { "code": "130407", "value": "肥乡区" }, { "code": "130408", "value": "永年区" }, { "code": "130423", "value": "临漳县" }, { "code": "130424", "value": "成安县" }, { "code": "130425", "value": "大名县" }, { "code": "130426", "value": "涉县" }, { "code": "130427", "value": "磁县" }, { "code": "130430", "value": "邱县" }, { "code": "130431", "value": "鸡泽县" }, { "code": "130432", "value": "广平县" }, { "code": "130433", "value": "馆陶县" }, { "code": "130434", "value": "魏县" }, { "code": "130435", "value": "曲周县" }, { "code": "130481", "value": "武安市" }] }, { "code": "130500", "value": "邢台市", "children": [{ "code": "130502", "value": "桥东区" }, { "code": "130503", "value": "桥西区" }, { "code": "130521", "value": "邢台县" }, { "code": "130522", "value": "临城县" }, { "code": "130523", "value": "内丘县" }, { "code": "130524", "value": "柏乡县" }, { "code": "130525", "value": "隆尧县" }, { "code": "130526", "value": "任县" }, { "code": "130527", "value": "南和县" }, { "code": "130528", "value": "宁晋县" }, { "code": "130529", "value": "巨鹿县" }, { "code": "130530", "value": "新河县" }, { "code": "130531", "value": "广宗县" }, { "code": "130532", "value": "平乡县" }, { "code": "130533", "value": "威县" }, { "code": "130534", "value": "清河县" }, { "code": "130535", "value": "临西县" }, { "code": "130581", "value": "南宫市" }, { "code": "130582", "value": "沙河市" }] }, { "code": "130600", "value": "保定市", "children": [{ "code": "130602", "value": "竞秀区" }, { "code": "130606", "value": "莲池区" }, { "code": "130607", "value": "满城区" }, { "code": "130608", "value": "清苑区" }, { "code": "130609", "value": "徐水区" }, { "code": "130623", "value": "涞水县" }, { "code": "130624", "value": "阜平县" }, { "code": "130626", "value": "定兴县"