更新记录

1.0.0（2025-12-04） 下载此版本

select 滚桶效果的 单列 select, 没有什么特殊功能, 视觉提升

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.16)

其他

select 滚桶效果的 单列 select, 没有什么特殊功能, 视觉提升

使用方法

<template>
    <view class="page">
        <button class="btn" @click="openSelect">选择城市</button>

        <view class="result">
            当前选择：
            <text v-if="currentItem">{{ currentItem.label }}</text>
            <text v-else>未选择</text>
        </view>

        <yy-select
            ref="selectRef"
            @select=""
            @confirm="onConfirm"
            @close="onClose"
        />

    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface OptionItem {
    label: string
    value: string
}

// 选项数据
const options = ref<OptionItem[]>([
    { label: '北京', value: 'bj' },
    { label: '上海', value: 'sh' },
    { label: '广州', value: 'gz' },
    { label: '深圳', value: 'sz' },
])

// 当前选中的项
const currentItem = ref<OptionItem | null>(null)

// 组件 ref
const selectRef = ref<InstanceType<any> | null>(null)

// 打开选择器
const openSelect = () => {
    console.log(options.value)
    // 默认选中索引（如果已经选过，就回到之前的项）
    let defaultIndex = 0
    if (currentItem.value) {  // 也可以再 事件中 存储好 index 就不用循环了
        const idx = options.value.findIndex(
            (item) => item.value === currentItem.value?.value
        )
        if (idx >= 0) defaultIndex = idx
    }
    // 调用组件的 show 方法
    selectRef.value?.show(defaultIndex, options.value as any)
}

// 实时滚动选中
const  = (payload: { activeIndex: number; item: OptionItem }) => {
    // 可选：做实时展示
    // console.log('正在选中：', payload)
}

// 点击“确定”
const onConfirm = (payload: { activeIndex: number; item: OptionItem }) => {
    currentItem.value = payload.item
    // console.log('最终选择：', payload)
}

// 关闭弹层（点遮罩或点取消）
const onClose = () => {
    // console.log('选择器关闭了')
}
</script>

<style scoped>
.page {
    padding: 24rpx;
}

.btn {
    margin-top: 40rpx;
}

.result {
    margin-top: 30rpx;
    font-size: 28rpx;
}
</style>