前端Vue自定义精美tabs,可设置下划线图标 热门标题

前端Vue自定义精美tabs,可设置下划线图标 热门标题, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13186

效果图如下:



# cc-beautyTabs

#### 使用方法

```使用方法

<!-- tabchange: tab选择事件 tabList:tab数据-->

<cc-beautyTabs @tabChange="tabChange" :tabList="tabList"></cc-beautyTabs>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<!-- tabchange: tab选择事件 tabList:tab数据-->

<cc-beautyTabs @tabChange="tabChange" :tabList="tabList"></cc-beautyTabs>

</view>

</template>

<script>

export default {

data() {

return {

tabList: [{

key: '1',

value: '推荐'

},

{

key: '2',

value: '标题一'

},

{

key: '3',

value: '标题二'

},

{

key: '4',

value: '标题三'

},

{

key: '5',

value: '标题四'

},

],

}

},

onLoad() {

},

methods: {

tabChange: function(t) {

console.log("tab选择序列 = " + JSON.stringify(t));

},

}

}

</script>

<style>

.content {

display: flex;

padding-top: 29px;

}

</style>

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容