更新记录

0.0.3（2024-06-27） 下载此版本

动态设置更多按钮或文字；

0.0.2（2024-06-22） 下载此版本

1、增加tab数目大于4个时，滚动显示； 2、当设置:right_icon="true"时，右侧空出88rpx的位置用于放置“更多”按钮；

0.0.1（2024-06-14） 下载此版本

自定义tabview

平台兼容性

diwun-tabView

自定义tabview

import tabView from '../../components/diwun-tabView/diwun-tabView.vue'

<!--当右边没有更多按钮时，more=false-->
<TabView :list="tagList" :more="false" justify-content="space-around" font-size="32" @tabChange="tabChange" @rightClick='rightClick'>
    <template #content>{{tagList[selectedTab].name}}</template>
</TabView>
<!--当右边有更多按钮，并且要设置图标-->
<TabView :list="tagList" right-icon="../../static/images/more.png" justify-content="space-around" font-size="32" @tabChange="tabChange" @rightClick='rightClick'>
    <template #content>{{tagList[selectedTab].name}}</template>
</TabView>

参数有：

justifyContent:String, //对齐方式，值分别为space-between/space-around/space-evenly,默认可以不写,不写时为flex-start
list:Array,  //标签列表的值
itemWidth: Number, //每一个标签的宽度，默认116rpx
containerPadding: Number,  //左右padding值，默认为0rpx
bgColor:String  //tab的背景颜色
fontSize: Number, //tab字体大小，默认为32rpx
lineTop:Number, //标签的上边距以及标签与下方横线之间的间距，默认为2rpx
rightIcon：String, //是否有右侧的类似“更多”的按钮,为按钮设置图标
more:Boolean, //右侧显示“更多”文字和向右箭头; 
当more=true或rightIcon有值的情况下，整个tabbar会让出右侧部分显示“更多”图标或文字，当rightIcon有值时，为图标，当more=true且rightIcon不设置时，显示文字

事件：

@tabChange：点击每个tab项时的事件，返回index;
@rightClick:右侧的更多按钮的点击事件;

版本更新

0.0.3版本 组件中可设置“更多”的图标或文字； 当more=true或rightIcon有值的情况下，整个tabbar会让出右侧部分显示“更多”图标或文字， 当rightIcon有值时，为图标，当more=true且rightIcon不设置时，显示文字和向右箭头

0.0.2版本 1、当tab数小于等于4时，按justifyContent的设置布局，如果不设置justifyContent，则左对齐；当tab数大于4时，可横向滚动 2、tabView右侧可设置图标或文字，用于设置“更多”按钮；按钮样式可自行设置，只要给tabView增加一个参数:right_icon=“true”，tabView会给空出88rpx的位置，以供放置更多按钮

<tab-view :list="tagList" font-size="32" item-width="148" container-padding="32" :right-icon="true" justify-content="space-around">
    <template #content>
    ...
    </template>
</tab-view>