选项卡(bui-tabbar-scroller)

选项卡(bui-tabbar-scroller) - 图1   选项卡(bui-tabbar-scroller) - 图2

用法

选项卡的实现使用方式：bui-tabbar-scroller + slider，充分利用slider的滑动特性。

实现：

  • bui-tabbar-scroller 通过控制 currentTab(v-model)索引来实现选中效果。
  • slider 通过 @change事件改变 index 和 currentTab 实现联动。
  • 要实现底部选项卡，只需要将 bui-tabbar-scroller 和 slider 区域对调即可;

html关键代码如下:

  1. <bui-tabbar-scroller :tabItems="tabItems" showSelectedLine=true @change="onItemChange" v-model="currentTab"></bui-tabbar-scroller>
  3. <slider class="slider" @change="onSliderChange" :index="currentTab">
  4.     <div class="slider-item">
  5.        <text class="h1">tab0</text>
  6.     </div>
  7.     <div class="slider-item">
  8.         <text class="h1">tab1</text>
  9.     </div>
  10.     <div class="slider-item">
  11.         <text class="h1">tab2</text>
  12.     </div>
  13.     <div class="slider-item">
  14.         <text class="h1">tab3</text>
  15.     </div>
  16. </slider>

JS关键代码如下：

  1. module.exports = {
  2.     data: function () {
  3.         return {
  4.             leftItem: {
  5.                 icon: 'ion-chevron-left'
  6.             },
  7.             currentTab:1,
  8.             tabItems: [
  9.                 {
  10.                     title: "首页",
  11.                     icon: "ion-home"
  12.                 },
  13.                 {
  14.                     icon: "ion-planet",
  15.                     title: "探索"
  16.                 },
  17.                 {
  18.                     icon: "ion-ios-cart",
  19.                     title: "商城"
  20.                 },
  21.                 {
  22.                     icon: "ion-ribbon-a",
  23.                     title: "奖励"
  24.                 }
  25.             ]
  26.         }
  27.     },
  28.     methods: {
  29.         back() {
  30.             this.$pop();
  31.         },
  32.         onItemChange(index){
  34.         },
  35.         onSliderChange(e){
  36.             var index = e.index;
  37.             this.currentTab=index;
  38.         }
  39.     }
  40. }

Example: bui-tabbar-scroller

属性

Prop Type Required Default Description
tabItems array Y 选项卡数据（数组），每个item应包含 icon, title 字段
value number Y 索引,外部使用 v-model
width number Y 150 每个tab的宽度，满屏是width=750/tab个数，滚动屏就width>750/tab个数
height string N 100px 高度
iconSize string N 45px 图标大小
titleSize string N 22px 字体大小
background string N #f7f7f7 背景颜色
selectedBackground string N #f7f7f7 选中的背景颜色
normalColor string N #818181 文字图标默认颜色
selectedColor string N #4ca4fe 文字图标选中的颜色
borderBottomColor string N #4ca4fe 底部边框颜色
showSelectedLine bool N false 选中项底部显示边框
containerStyle object N 外层容器扩展样式
itemStyle object N 每个item扩展样式

事件

支持 @change事件，返回当前选中 item 的 index