tabs

tabs标签页,支持自定义设置,具体查看文档。暂不支持超出一屏,滚动标签页参考项目中的示例。

组件结构

  1. <template>
  2. <viewclass="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:bgColor,top:isFixed?top+'px':'auto'}">
  3. <viewv-for="(item,index) in tabs" :key="index"class="tui-tabs-item" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
  4. <viewclass="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{color:currentTab==index?selectedColor:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">{{item.name}}</view>
  5. </view>
  6. <viewclass="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
  7. sliderHeight+'rpx',bottom:bottom+'rpx',background:sliderBgColor}"></view>
  8. </view>
  9. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiTabs",
  4. props:{
  5. //标签页
  6. tabs:{
  7. type:Array,
  8. default(){
  9. return[]
  10. }
  11. },
  12. //rpx
  13. height:{
  14. type:Number,
  15. default:80
  16. },
  17. //rpx 只对左右padding起作用,上下为0
  18. padding:{
  19. type:Number,
  20. default:30
  21. },
  22. //背景色
  23. bgColor:{
  24. type:String,
  25. default:"#FFFFFF"
  26. },
  27. //是否固定
  28. isFixed:{
  29. type:Boolean,
  30. default:false
  31. },
  32. //px
  33. top:{
  34. type:Number,
  35. // #ifndef H5
  36. default:0
  37. // #endif
  38. // #ifdef H5
  39. default:44
  40. // #endif
  41. },
  42. //是否去掉底部线条
  43. unlined:{
  44. type:Boolean,
  45. default:false
  46. },
  47. //当前选项卡
  48. currentTab:{
  49. type:Number,
  50. default:0
  51. },
  52. //滑块宽度
  53. sliderWidth:{
  54. type:Number,
  55. default:68
  56. },
  57. //滑块高度
  58. sliderHeight:{
  59. type:Number,
  60. default:6
  61. },
  62. //滑块背景颜色
  63. sliderBgColor:{
  64. type:String,
  65. default:"#5677fc"
  66. },
  67. //滑块bottom
  68. bottom:{
  69. type:Number,
  70. default:0
  71. },
  72. //标签页宽度
  73. itemWidth:{
  74. type:String,
  75. default:"25%"
  76. },
  77. //字体颜色
  78. color:{
  79. type:String,
  80. default:"#666"
  81. },
  82. //选中后字体颜色
  83. selectedColor:{
  84. type:String,
  85. default:"#5677fc"
  86. },
  87. //字体大小
  88. size:{
  89. type:Number,
  90. default:28
  91. },
  92. //选中后 是否加粗 ,未选中则无效
  93. bold:{
  94. type:Boolean,
  95. default:false
  96. }
  97. },
  98. watch:{
  99. currentTab(){
  100. this.checkCor();
  101. }
  102. },
  103. created(){
  104. setTimeout(()=>{
  105. // 高度自适应
  106. uni.getSystemInfo({
  107. success:(res)=>{
  108. this.winWidth = res.windowWidth;
  109. this.checkCor()
  110. }
  111. });
  112. },50);
  113. },
  114. data(){
  115. return{
  116. winWidth:0,
  117. scrollLeft:0
  118. };
  119. },
  120. methods:{
  121. checkCor:function(){
  122. let tabsNum =this.tabs.length
  123. let padding =this.winWidth /750*this.padding
  124. let width =this.winWidth - padding *2
  125. let left =(width / tabsNum -(this.winWidth /750*this.sliderWidth))/2+ padding
  126. let scrollLeft = left
  127. if(this.currentTab >0){
  128. scrollLeft = scrollLeft +(width / tabsNum)*this.currentTab
  129. }
  130. this.scrollLeft = scrollLeft
  131. },
  132. // 点击标题切换当前页时改变样式
  133. swichTabs:function(index){
  134. let item =this.tabs[index]
  135. if(item && item.disabled)return;
  136. if(this.currentTab == index){
  137. returnfalse;
  138. }else{
  139. this.$emit("change",{
  140. index:Number(index)
  141. })
  142. }
  143. }
  144. }
  145. }
  146. </script>

组件样式

... 此处省略n行

脚本说明

props

参数类型描述默认值
tabsArray标签页列表数据[]
heightNumber高度,单位:rpx80
paddingNumber只对左右padding起作用,上下为0,单位:rpx30
bgColorString背景颜色#FFFFFF
isFixedBoolean是否固定false
topNumbertop值,isFixed为true时有效,单位:pxapp和小程序:0,H5为44px
unlinedBoolean是否去掉底部线条false
currentTabNumber当前选项卡0
sliderWidthNumber滑块宽度,单位:rpx68
sliderHeightNumber滑块高度,单位:rpx6
sliderBgColorString滑块背景颜色#5677fc
bottomNumber滑块bottom值,单位:rpx0
itemWidthString标签页宽度25%
colorString字体颜色#666
selectedColorString选中后字体颜色#5677fc
sizeNumber字体大小28
boldBoolean选中后 字体是否加粗 ,未选中则无效false
 props:
   "tabs 字段":
         "name": "全部", //标签页标题
         "disabled": "false" //是否禁用点击

methods

名称描述
checkCor计算滑块需要滑动距离
swichTabs点击标题切换到当前标签页

示例

... 此处省略n行,下载源码查看

预览图

tabs 标签页 - 图1