uniapp picker 两列用法完整案例
时间: 2025-01-27 21:09:02 浏览: 30
UniApp的Picker组件是一个用于选择列表的输入控件,可以创建一个多列的选项列表。下面是一个使用两列(比如年份和月份)的完整案例:
```html
<template>
<view class="picker-container">
<uni-picker v-model="selectedYear" placeholder="请选择年份" @change="handleYearChange">
<view slot="top">年</view>
<picker-column :data="yearList"></picker-column>
</uni-picker>
<uni-picker v-model="selectedMonth" placeholder="请选择月份" @change="handleMonthChange">
<view slot="top">月</view>
<picker-column :data="monthList" :range-separator="--"></picker-column>
</uni-picker>
</view>
</template>
<script>
export default {
data() {
return {
selectedYear: '',
selectedMonth: '',
yearList: ['2022', '2021', '2020'], // 年份数据
monthList: ['一月', '二月', '三月', ...], // 月份数据,可以根据实际需要填充全年的月份
};
},
methods: {
handleYearChange(value) {
this.selectedMonth = '';
this.monthList = []; // 清空月份下拉框,防止显示上一年的数据
// 如果你需要基于选中的年份动态加载月份数据,这里可以添加相应的请求API或计算逻辑
},
handleMonthChange(value) {
console.log('月份已选择:', value);
}
},
};
</script>
<style scoped>
.picker-container {
display: flex;
}
</style>
```
在这个例子中,我们有两个`uni-picker`组件,每个组件对应一个列。`v-model`绑定到对应的变量`selectedYear`和`selectedMonth`。`picker-column`用于展示数据,并通过`:data`属性传入数据数组。
当用户选择年份时,会触发`handleYearChange`方法,清空月份的选项并可能更新月份数据。`handleMonthChange`则是在用户选择月份时打印出所选值。
阅读全文
相关推荐
















