uni-app 之选择器

Wang_Petrichor

已于 2024-01-19 17:17:55 修改

阅读量1.4k

点赞数 6

文章标签： uni-app css 前端

于 2024-01-19 17:17:53 首次发布

本文链接：https://blog.csdn.net/weixin_71273777/article/details/135632462

版权

本文详细介绍了uni-app平台中的picker组件，包括单列选择器、多列选择器、时间选择器和日期选择器的用法，以及相应的数据范围设定和事件触发机制。

摘要由CSDN通过智能技术生成

官方文档：picker | uni-app官网 (dcloud.net.cn)

组件：<picker></picker>

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

单列选择器

mode：selector（单列选择器）
range：数组或数组对象，存放要展示的数据，只有 mode 为 selector 或 multiSelector 时有效
range-key：指定数组对象中的 key 为选择器展示内容
value：表示选择了 range 中的第几个，从 0 开始
change：点击确定时触发的事件

<picker @change="bindPickChange" 
        mode="selector" 
        :range="array" 
        range-key="name" 
        :value="index">
    <view>{{array[index].name}}</view>
</picker>

<script>
	export default {
		data() {
            return {
                array: [
                    {name: "北京"}, 
                    {name: "天津"},
                    {name: "上海"}
                ],
				index: 0
            }
        },
        methods: {
            bindPickChange(e) {
                // 改变当前选择的值
				this.index = e.detail.value;
			},
        }
    }
</script>

多列选择器

mode：multiSelector（多列选择器），
range：二维数组，
value：一个数组，表示选择了 range 中的第几列，第几个，从 0 开始
change：点击确定时触发的事件

<picker @change="bindPickChange" 
        @columnchange="bindMultiPickerColumnChange" 
        mode="multiSelector"
        :range="multArray" 
        :value="multIndex">
    <view>
        {{multArray[0][multIndex[0]]}}
        {{multArray[1][multIndex[1]]}}
        {{multArray[2][multIndex[2]]}}
    </view>
</picker>

时间选择器

mode：time
end：结束时间
start：开始时间
value：默认选中时间

<picker @change="bindPickChange" 
        mode="time" 
        end="endTime" 
        start="startTime" 
        :value="time">
    <view>{{time}}</view>
</picker>

<script>
	export default {
		data() {
            return {
                endTime: "23: 59",
                startTime: "00: 00",
                time: "11: 17"
            }
        },
        methods: {
            bindPickChange(e) {
                // 改变选中的时间
                this.time = e.detail.value
			},
        }
    }
</script>

日期选择器

mode：date
end：结束日期
start：开始日期
value：默认选中日期

<picker @change="bindPickChange"
        mode="date" 
        :value="date" 
        :start="startDate" 
        :end="endDate">
    <view>{{date}}</view>
</picker>

<script>
	export default {
		data() {
            return {
                date: this.getDate({
				    format: true
			    }),
            }
        },
        computed: {
            // 获取开始日期
			startDate() {
				return this.getDate('start');
			},            
            // 获取结束日期
			endDate() {
				return this.getDate('end');
			}
		},
        methods: {
            // 日期转换
            getDate(type) {
				const date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); //日

                // 日期的起始位置
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') { // 日期的结束位置
					year = year + 2;
				}

				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			},
            bindPickChange(e) {
                // 改变选中的日期
                this.date = e.detail.value
			},
        }
    }
</script>