更新记录
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参数失效问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
使用说明
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 |
可替换列表展开的头部 |