更新记录

1.0.3（2025-03-28） 下载此版本

修复非联动模式,传参报错问题

1.0.2（2025-03-28） 下载此版本

新增不联动下也可多列选择

1.0.1（2025-03-05） 下载此版本

修改返回数据时,返回整个选中的对象,而不是绑定的两个字段

平台兼容性

Picker 滚动选择器

组件名: xt-picker

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <xt-picker ref="picker" v-model="xtID" :range="data" :show="show" @close="close" @change="change"></xt-picker>
        <button @click="showPicker">选择</button>
        <button @click="log">打印</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            load: false,
            show: false,
            xtID: [
                {
                    value: 1
                },
                {
                    value: 4
                }
            ],
            data: [
                [
                    {
                        value: 1,
                        label: '中国'
                    },
                    {
                        value: 6,
                        label: '美国'
                    },
                    {
                        value: 9,
                        label: '日本'
                    },
                    {
                        value: 11,
                        label: '韩国'
                    }
                ],
                [
                    {
                        value: 2,
                        label: '北京'
                    },
                    {
                        value: 4,
                        label: '上海'
                    },
                    {
                        value: 5,
                        label: '广州'
                    }
                ]
            ]
        };
    },
    methods: {
        log() {
            console.log(this.xtID);
        },
        change(e) {
            console.log(e);
        },
        showPicker() {
            this.show = !this.show;
        },
        close() {
            this.show = false;
        }
    }
};
</script>

<style lang="scss">
.xt {
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    gap: 15rpx;
}
</style>

联动用法

<template>
    <view class="xt">
        <xt-picker ref="picker" v-model="xtID" :loading="load" :range='data' column="3" linked :show="show"
            @close="close" @change="change"></xt-picker>
        <button @click="showPicker">选择</button>
        <button @click="log">打印</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                load: false,
                show: false,
                xtID: [{
                    label: '中国',
                    value: 1
                }, {
                    label: '北京',
                    value: 2
                }, {
                    value: 12
                }, ],
                data: [{
                        value: 1,
                        label: '中国',
                        children: [{
                                value: 2,
                                label: '北京',
                                children: [{
                                        value: 3,
                                        label: '东城区'
                                    },
                                    {
                                        value: 12,
                                        label: '西城区'
                                    }
                                ]
                            },
                            {
                                value: 4,
                                label: '上海'
                            }, {
                                value: 5,
                                label: '广州'
                            }
                        ]
                    }, {
                        value: 6,
                        label: '美国',
                        children: [{
                            value: 7,
                            label: '纽约'
                        }, {
                            value: 8,
                            label: '洛杉矶'
                        }]
                    },
                    {
                        value: 9,
                        label: '日本',
                        children: [{
                            value: 10,
                            label: '东京'
                        }]
                    }, {
                        value: 11,
                        label: '韩国'
                    }
                ]
            }
        },
        methods: {
            log() {
                console.log(this.xtID);
            },
            change(e) {
                if (e.newValue == 2) {
                    this.load = true;
                    setTimeout(() => {
                        this.$refs.picker.setList(3, [{
                            value: 20,
                            label: '秋叶原'
                        }]);
                        this.load = false;
                    }, 2000)

                }
            },
            showPicker() {
                this.show = !this.show;
            },
            close() {
                this.show = false
            }
        }
    }
</script>
<style lang="scss">
    .xt {
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
    }
</style>

API

Events

Methods

通过ref调用