更新记录

1.1.1(2021-07-18)

修改组件的readme文件,由于支持easycom,所以去掉import组件的代码说明。

1.1.0(2021-07-17)

转换为支持uni_modules规范的插件

0.9.3(2020-08-13)

修复bug

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

一、设计目标 - 简单易用

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

  • 简单 首先,该组件设置简单,属性不多,目前这个版本才 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>
    export default {
        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-13

v0.9.3

修复bug

2020-08-12

v0.9.2

  1. 自定义组件生命周期中的 mounted 粗心写错了,应为 ready

2020-08-12

v0.9.1

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

2020-08-11

v0.9.0

  1. 在 DCloud 插件市场第一次发布

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问