更新记录

1.0.0（2025-02-17） 下载此版本

发布初版

平台兼容性

Picker 滚动选择器

组件名: xt-picker

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

安装方式

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

基本用法

<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;
    }

    .picker {
        width: 100%;
        height: 300rpx;
    }
</style>

API

Events

Methods

通过ref调用