简单易用的滚动选项卡：tbs-scrollTab

一、设计目标 - 简单易用

顶部选项卡是一个比较常用的组件，有很多的使用场景，网上有很多优秀组件可供选择，但由于大部分组件功能太多，使用复杂，所以就干脆参考网上的组件自己简单实现一个。

简单
　　首先，该组件设置简单，属性不多，目前这个版本才 6 个，其中还包括一个 tab 页的数据数组；剩下还有：tab 页显示文本高度、相邻两个 tab 之间的距离、背景色、非选中 tab 页文本的显示颜色、选中 tab 页文本的显示颜色。后续根据需要增减，使用者自己修改也很方便；
　　其次，调用简单，没有门槛，十多行代码就能轻松搞定；
易用
　　首先，该 tab 组件能自动适应 tab 数量变化。当 tab 数量较小，显示不超出容器宽度时，默认居中显示；当 tab 数量较多，超出容器宽度时，点击的 tab 自动居中，点击左侧、右侧 tab 可自动向右、和向左滑动，当然拖动也是允许的，查看和点击非常方便；
　　其次，组件设计时考虑到 tab 操作最关键的几个功能：文字大小的调整、tab间隔距离的调整、背景色设置、激活高亮文字的显示颜色、非选择 tab 文字的显示颜色等。使用起来简约而不简单；
　　第三，该 tab 组件可以很方便地承载数据。给 tab 数组赋值时，可以带入数据（可选），当选定 tab 后，在返回的事件里，不仅包括 tab 数组的 index 索引号，而且可携带传给父组件的数据（可选）。

二、调用方式

视图调用

<template>
    <view>
        <tbsScrollTab 
            :tabItems="tabItems" 
            spaceBetween=60 
            fontSize=30 
            color="#555"
            activeColor="yellow" 
            backgroundColor="red"
            @tabChangeEvent="onTabChange($event)"
        ></tbsScrollTab>
    </view>
</template>

js 调用

<script>
    import tbsScrollTab from '@/components/tbs-scrollTab/tbs-scrollTab.vue';

    export default {
        components: {
            tbsScrollTab,
        },
        data() {
            return {
                tabItems: [
                    {name: '关注', data: {}},
                    {name: '推荐', data: {}},
                    {name: '体育', data: {}},
                    {name: '热点', data: {}},
                    {name: '财经', data: {}},
                    {name: '娱乐', data: {}},
                    {name: '军事', data: {}},
                    {name: '历史', data: {}},
                    {name: '本地', data: {}},
                ],
            }
        },
        methods: {
            onTabChange(e) {
                console.log('onTabChange e', e)
        },
    }
</script>

参数说明

参数	类型	默认值	说明
tabItems	Array	演示数据，如不用可设为： []	【数据】，必传，格式可参考演示数据
fontSize	Number	30	【字体大小】，可选，单位为：upx
spaceBetween	Number	68	【tab 之间的距离】，可选，单位为：upx
color	String	#555	非选择的 tab 文本颜色，可选
activeColor	String	blue	选择的 tab 高亮文本颜色，默认蓝色 blue
backgroundColor	String		背景颜色，可选，默认为空

三、事件

事件名称	参数
@tabChangeEvent	返回对象，包含 tabIndex 和 tabItem，具体示例见下：

{
    tabIndex: x, // x 为 数组元素序号，如：0、1、2、3... 等
    tabItem:{
        name:'xxx', // xxx 为 tab 显示的文字 title
        data:{}, // 返回结果中携带的数据对象
    }
}

四、说明

1、该组件目前只是在微信小程序里测试通过，其它端未做适配，如想多端使用，可在此基础上修改；
2、既然是在 uniapp 平台上开发，所以参数里尺寸的数字基本都统一使用 upx，在内部生成 css 时，使用了 uni.upx2px() 函数将 upx 转化为了 px 单位；
3、该组件已经在 DCloud 插件市场发布成功，组件名为：tbs-scrollTab。是我发布的第一款组件，也不知道能不能用、好不好用，欢迎测试并批评指正。
4、推荐一下：做移动端的多端开发，强烈推荐 uni-app 我一直在用。

最后，仿的今日头条的 Tab，以及组件丑丑的显示

今日头条Tab参考.png

tbs-scrollTab界面插图.png

更新日志

2020-08-12

v0.9.1

去掉了组件中对 /uni.scss 和 /common/uni.css 的依赖

2020-08-11

v0.9.0

在 DCloud 插件市场第一次发布

最后编辑于：2020.08.12 12:54:39