更新记录

1.0.7(2022-09-03) 下载此版本

1、修复微信小程序端展开后选择值列表渲染失败问题。 2、修复微信小程序默认展开图标不显示问题。 3、Props新增scrollWrapStyle属性,删除zIndex。

1.0.6(2022-08-09) 下载此版本

修复请求数据列表渲染失败问题

1.0.5(2022-08-06) 下载此版本

修复defaultChoseItem参数失效问题

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

使用说明

1、解压下载的压缩包,将组件放在项目的components目录下。

2、引用组件

复制代码<template>
    <view>
        <vgt-tab
            :list="list"
            :scrollWrapStyle="scrollWrapStyle"
            :defaultChoseInd="defaultChoseInd" 
            :defaultChoseItem="defaultChoseItem"
            :itemStyleDefault="itemStyleDefault"
        >
        </vgt-tab>
    </view>
</template>

<script>
    import vgtTab from '@/components/vgt-tab.vue'
    export default {
        components: {
            'vgt-tab': vgtTab
        },
        data() {
            return {
                defaultChoseInd: 3,
                defaultChoseItem: '韩国',
                itemStyleDefault: {
                    color: '#f00'
                },
                scrollWrapStyle: {
                    position: 'fixed',
                    zIndex: 1000,
                },
                list: [
                    '澳大利亚',
                    '美国',
                    '中国',
                    '日本',
                    '朝鲜',
                    '韩国',
                    '新西兰',
                    '法国',
                    '英国',
                    '加拿大',
                    '埃及',
                    '意大利',
                    '荷兰',
                    '蒙古',
                    '越南',
                    '新加坡',
                    '巴基斯坦',
                    '印度',
                    '俄罗斯',
                    '乌克兰',
                    '墨西哥',
                ],
            }
        },
    }
</script>

参数说明

1、Props

参数名 参数类型 是否必填 默认值 说明
list Array [] 选项卡列表
isUseOpenList Boolean true 是否使用展开列表
openListTit String 切换 展开列表顶部小标题
itemStyleDefault Object { color: '#393939',background: '#f4f4f4'} 列表每一项的默认样式
itemStyleActive Object {color: '#3555fc','border': '1rpx solid #3555fc;'} 列表某一项被选中时的样式
scrollWrapStyle Object {} 列表外层样式
defaultChoseInd Number 0 根据下标设置默认选中项
defaultChoseItem String '' 根据值设置默认选中项(优先级高于defaultChoseInd)

2、事件

事件名 说明 返回值类型 返回值格式
onValueChange 选中时的回调 Object {currentInd: 0, // 当前选中的下标 currentItem: '中国', // 当前选中的容}
onListShow 列表展开关闭时的回调 Boolean ture/false

3、slots

slot名称 说明
icon-unfold 可替换右侧图标
icon-fold 可替换列表展开后的图标
open-list-tit 可替换列表展开的头部

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
liu***@163.com

2023-06-02

新手求教,为啥这个总是在页面最底下,我设置了点击显示不同的列表,tab卡直接覆盖在列表上了,滑动列表,tab卡也不往上滑,也是在最底下

liu***@163.com 2023-06-02

有懂的麻烦回复一下,或者留下联系方式

140***@qq.com

2023-05-02

不行啊,小程序没法用

uniSGJ

2023-02-06

不能在h5上使用吗

du****@dufan.cool

2022-11-20

能否支持 vue3 ?

jia***@163.com

2022-11-02

这个是真的不支持APP嘛,哇擦

xtj***@163.com

2022-09-23

复制上面的代码 功能不能用

blade_555 2022-09-23

什么环境?下个示例项目看看。

174***@qq.com

2022-09-03

微信小程序打开菜单选择一个后 整个组件都不显示了

blade_555 2022-09-03

已修复

174***@qq.com 2022-09-03
xia***@game.com

2022-08-10

一只眠羊

2022-08-08

加了

blade_555 2022-08-08

这不应该啊,要不你加下我微信17610249220,发我看看。

ase***@163.com

2022-07-26

先感谢一下大哥 正好用上~~~~

blade_555 2022-07-26

不谢~~

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问