更新记录

1.0.13（2023-12-09）

更新一些错误

1.0.12（2023-11-13）

更新1.0.12

平台兼容性

组件名：yg-toptabbars 代码块： <yg-toptabbars />

一款轻量级的uniapp顶部自定选项卡组件，自用而开发的插件，方便因uniapp的原生组件无法实现自己想要的一些其他功能而开发的。

注意事项 无。

引入方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法 示例

<yg-toptabbars :tabList="tabList" @onTabClick="onTabClick" />

data需要传入的值 tabList中的对象小于5个时自动平铺，大于5个时每个选项卡的宽度为当前屏幕宽度的1/5.

    tabList：[{
        image:'',//传入图片
        name:''//传入选项卡名称
    }],

methods方法

    onTabClick(data){
        console.log(data)
    }

页面效果完整示例

<template>
    <view class="content">
        <view class="tabbar-box" >
            <yg-tabbar :tabList="tabList" @onTabClick="onTabClick" :currentIndex="currentIndex" :selectColor="selectColor" :btmColor="btmColor"/>
        </view>
        <view class="sssw">
            <input type="number" v-model="txtInput" />
            <button @click="onclickbtn">输入数字展示效果</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabList: [{
                    name: '选项卡1'
                },{
                    name: '选项卡2'
                }],
                currentIndex:0,
                txtInput:''
            }
        },
        onLoad() {

        },
        onShow() {
        },
        methods: {
            //点击事件，传值出来，data有tabList的下标值和当前数组值
            onTabClick(data){
                this.txtInput = data.i
            },
            //测试函数
            onclickbtn(){
                this.currentIndex = Number(this.txtInput);
                console.log(this.currentIndex)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
    }
    .tabbar-box{
        width: 100%;
        height: auto;
        background-color: #ddd;
    }
    input {
        border: 1px solid #000;
        width: calc(100% - 40rpx);
        background-color: lemonchiffon;
        margin: 20rpx;
        height: 40rpx;
        box-sizing: border-box;
    }
    .sssw{
        width: 100%;
        height: 300rpx;
    }
    button{
        margin: 20rpx;
    }
</style>

API yg-tabbar Props

tabList包含的属性

methods方法

另附滑动条处理 把下列语句粘贴到App.vue中即可

<style>
    /*每个页面公共css */
    /* 解决小程序和app滚动条的问题 */
    /* #ifdef MP-WEIXIN || APP-PLUS */
        ::-webkit-scrollbar {
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background: transparent;
            color: transparent;
          }
    /* #endif */

    /* 解决H5 的问题 */
    /* #ifdef H5 */
        uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
            /* 隐藏滚动条，但依旧具备可以滚动的功能 */
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background: transparent;
            color: transparent;
        }
    /* #endif */
</style>