#uni-app(Vue2)+uView2.0封装省市区街道三级四级联动，手把手教你轻松搞定#

使用 uni-app + uView 轻松实现省市区街道联动

简介

在构建移动应用时，省市区街道联动是一个常见的需求。本文将指导你如何使用 uni-app (Vue2) 和 uView2.0 轻松实现三级或四级联动。

准备工作

• 安装 uni-app：npm install uni-app
• 安装 uView-UI：npm install uview-ui

创建项目

使用 create-uni-app 工具创建一个新的项目：

npx create-uni-app my-app

配置项目

在项目根目录下的 uni.config.js 文件中，添加 uView 插件：

{
  "plugins": {
    "uView": {}
  }
}

创建联动组件

在 src/components 目录下创建一个名为 PickerCity.vue 的组件文件，并添加以下代码：

<template>
  <u-picker
    :columns="columns"
    :default-index="defaultIndex"
    @change="onChange"
  />
</template>

<script>
import { getAreaList } from '@/api/area'

export default {
  data() {
    return {
      columns: [],
      defaultIndex: [],
    }
  },
  async mounted() {
    const res = await getAreaList()
    this.columns = res.data.map(item => item.children)
  },
  methods: {
    onChange(picker, value, index) {
      this.$emit('change', value, index)
    },
  },
}
</script>

使用组件

在需要使用联动组件的页面文件中，导入组件并添加以下代码：

<template>
  <PickerCity @change="onCityChange" />
</template>

<script>
import PickerCity from '@/components/PickerCity'

export default {
  components: { PickerCity },
  methods: {
    onCityChange(value, index) {
      console.log(value, index)
    },
  },
}
</script>

效果演示

运行项目，即可在页面上看到省市区街道联动组件。

代码示例

// 获取地区列表接口
export async function getAreaList() {
  return await uniCloud.callFunction({
    name: 'getAreaList',
  })
}

// PickerCity 组件
<template>
  <u-picker
    :columns="columns"
    :default-index="defaultIndex"
    @change="onChange"
  />
</template>

<script>
import { getAreaList } from '@/api/area'

export default {
  data() {
    return {
      columns: [],
      defaultIndex: [],
    }
  },
  async mounted() {
    const res = await getAreaList()
    this.columns = res.data.map(item => item.children)
  },
  methods: {
    onChange(picker, value, index) {
      this.$emit('change', value, index)
    },
  },
}
</script>

// 使用 PickerCity 组件
<template>
  <PickerCity @change="onCityChange" />
</template>

<script>
import PickerCity from '@/components/PickerCity'

export default {
  components: { PickerCity },
  methods: {
    onCityChange(value, index) {
      console.log(value, index)
    },
  },
}
</script>

常见问题解答

Q：如何修改默认选中的地区？
A：可以通过 defaultIndex 属性设置默认选中的地区，例如：

<PickerCity :default-index="[0, 0, 0]" />

Q：如何自定义地区数据？
A：可以自己定义地区数据，并通过 columns 属性传递给组件，例如：

<PickerCity :columns="myAreaData" />

Q：如何实现多级联动？
A：默认情况下是三级联动，可以通过修改 columns 属性中的数据结构实现多级联动。

Q：如何获取选中的地区信息？
A：通过监听 change 事件即可获取选中的地区信息，例如：

<PickerCity @change="onCityChange" />

Q：如何使用本地数据实现联动？
A：可以将本地数据存储在一个 JSON 文件中，然后通过 require 引入组件中。