uniapp picker 两级用法完整案例
时间: 2025-01-04 20:03:47 浏览: 49
UniApp 的 Picker 组件是一个用于选择日期、时间、列表等数据的交互控件。如果你想创建一个两级联动的 Picker 案例,比如第一级是地区选择,第二级根据选中的地区显示相应的城市列表,你可以按照以下步骤编写:
```html
<template>
<view>
<!-- 第一级地区选择 -->
<picker v-model="province" :range="provinces" placeholder="请选择省份">
<view slot="item" @click="handleProvinceClick">{{ item.label }}</view>
</picker>
<!-- 根据 province 变化动态加载城市列表 -->
<picker v-model="city" :disabled="!province" placeholder="请选择城市">
<view slot="item" @click="handleCityClick">{{ item.label }}</view>
</picker>
</view>
</template>
<script setup>
import { ref } from 'vue';
// 初始化省级别数据
const provinces = ["北京", "上海", "广东", "江苏", "浙江"];
const province = ref("");
const city = ref("");
// 点击省份选择器触发的城市更新函数
function handleProvinceClick(provinceIndex) {
province.value = provinces[provinceIndex];
// 如果你想从服务器获取城市的列表,可以在这里发起请求,并在回调里设置 city 的值
// 这里仅做静态示例
const citiesForProvince = getCityList(provinces[provinceIndex]); // 假设getCityList是个返回城市列表的函数
city.value = citiesForProvince;
}
// 点击城市选择器触发的选择事件
function handleCityClick(cityIndex) {
city.value = cities[cityIndex];
}
// 假定的城市列表,这里仅作为示例,实际应用需要根据province动态加载
const cities = [
{"label": "北京市", "value": "010"},
{"label": "上海市", "value": "021"},
// 其他城市...
];
</script>
```
这个例子展示了如何使用 Vue 的响应式系统来实现两级联动的选择。当用户点击省份选项时,会触发 `handleProvinceClick` 函数,更新 `province` 和 `city` 的值,进而更新下拉框中的城市选项。
阅读全文
相关推荐










