更新记录
1.0.2(2022-12-21)
1.0.1(2022-12-16)
** 注意 **
1.目前暂不支持横向滑动
2.tabsList 数组长度最大为5 !!!(否则将会暂时不全)
** 即将上线 **
1.tabs横向滑动
2.tabs底部动画颜色自定义 (目前只能在源码中修改)
3.tabs头部添加图片 (目前只能在源码中修改)
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
× |
× |
× |
× |
× |
× |
× |
<template>
<gn-tabs :tabList="list" @change="switchChange"></my-tabs>
</template>
<script>
/**
****** 使用方法 ******
1.将gn-tabs文件夹放到项目components中
2.在页面中使用<gn-tabs></gn-tabs>
****** API 类型 默认值 可选值 说明******
1.tabsList Array - - 为必填!
2.tabIndexNow Int 0 - 为默认选择项 (Int类型)
3.justify String space-around - 组件展示方式(默认justify-content:space-around String类型) 传值参考justify-content属性
4.fontSize Int 30 - tabs文字大小(根据自己需求调节,不建议过大或过小,Int类型)
5.fontColor String 262626 - tabs文字颜色(默认为'#262626',String类型)
6.ceiling Boolean false - 吸顶(传入Boolean值)
7.itemWidth Number 150 - 每个选项的宽度
****** Events ******
1.change 标签索引改变时触发
****** 注意 ******
****** 即将上线 ******
1.tabs横向滑动 (已上线)
2.tabs底部动画颜色自定义 (目前只能在源码中修改)
3.tabs头部添加图片 (目前只能在源码中修改)
*/
export default {
data(){
return{
list:[
{
id: 0,
name: '商品介绍'
},
{
id: 1,
name: '规格参数'
},
{
id: 2,
name: '售后保障'
}
]
}
},
methods:{
switchChange(index){
// 这里为回调参数
console.log(index)
}
},
}
</script>