更新记录

V2.1.0（2023-03-07） 下载此版本

新增自定义点击tab标签事件

V1.1.0（2023-03-07） 下载此版本

适配app-vue

V1.0.0（2023-03-03） 下载此版本

首次更新，滑动tab标签吸顶的基本实现

平台兼容性

uni-app

其他

说明

该组件，是一个tabs标签组件，签数量，支持1个~多个，5个之内平均配宽度，超过5个标签，可以滑动查看。 该组件的一个特点是无论页面滑动到什么位置，tab标签始终吸附在顶部导航处。

组件名：sa-tabs

平台差异

基本用法

具体的标签，通过tabList参数配置，该参数要求为数组，元素为对象，对象要有text属性，见示例：

<template>
     <sa-tabs :tabList="tabList" @onClickTab ="onClickTab"></sa-tabs>
</template>

<script>
    export default {
        data() {
            return {
                tabList: [{
                    text: '关注',
                }, {
                    text: '推荐',
                }, {
                    text: '电影'
                }, {
                    text: '科技'
                }, {
                    text: '音乐'
                }, {
                    text: '美食'
                }, {
                    text: '文化'
                }]
            }
        },
        methods: {
            onClickTab (e) {
                console.log('e', e);
            }
        }
    }
</script>

修改颜色

<template>
     <sa-tabs :tabList="tabList" @onClickTab ="onClickTab" color="#fff" bgColor="deeppink"></sa-tabs>
</template>

API

SaTabs Props

Events