更新记录

1.0.13(2023-12-09) 下载此版本

更新一些错误

1.0.12(2023-11-13) 下载此版本

更新1.0.12


平台兼容性

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

组件名: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 Array 添加选项卡按钮有image/name属性
btmColor String red 选项卡底部横条颜色
defaultColor String #333 默认字体颜色
selectColor String red 选中字体颜色

tabList包含的属性

属性名 类型 默认值 说明
image String 选项卡图标
name String 选项卡名称

methods方法

函数名 传值类型 说明
onTabClick Object 该函数会从组件回传一个(data),该值附带有当前点击的对象和一个i下标用于做swiper或则切换时的传入值

另附滑动条处理 把下列语句粘贴到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>

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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