Tabs 导航切换栏

使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-tabs": "wuss-weapp/w-tabs/index",
}

视频演示

代码演示

<w-pane title="Tabs" desc="导航切换栏" />
<w-pane desc="Default" />
<w-tabs bind:onChange="handleChange" options="{{ tabs1 }}" />
<w-pane desc="Initial Index = 2" />
<w-button type="info" bind:onClick="handleSelected">selected tab2</w-button>
<w-tabs
 bind:onChange="handleChange"
 options="{{ tabs4 }}"
 currentIndex="{{ index }}"
/>
<w-pane desc="Line Size = 1" />
<w-tabs lineSize="1" options="{{ tabs1 }}" />
<w-pane desc="Active Color" />
<w-tabs
 lineSize="1"
 activeColor="#ff8800"
 options="{{ tabs3 }}"
/>
<w-pane desc="Icon" />
<w-tabs
 textStyles="font-size: 14px;"
 options="{{ tabs2 }}"
 activeColor="#ef473a"
/>
<w-pane desc="Disabled Transition and DisabledItem" />
<w-tabs
 transition="{{ false }}"
 options="{{ tabs4 }}"
 bind:disabled="onDisabled"
/>
<w-pane desc="Scroll" />
<w-tabs bind:onClick="handleClick" options="{{ tabs5 }}" />
<w-pane desc="Disabled Line" />
<w-tabs
 transition="{{ false }}"
 line="{{ false }}"
 options="{{ tabs4 }}"
/>
<w-pane desc="Disabled Border" />
<w-tabs
 transition="{{ false }}"
 line="{{ false }}"
 border="{{ false }}"
 options="{{ tabs4 }}"
/>

data: {
  index: 2,
  tabs1: ['电器', '数码', '食品', '手机'],
  tabs2: [
    {
      text: '微博',
      icon: 'weibo',
      iconSize: '32rpx',
      iconColor: '#ef473a',
    },
    {
      text: '脸书',
      icon: 'facebook',
      iconSize: '32rpx',
      iconColor: '#ef473a',
    },
    {
      text: '苹果',
      icon: 'apple',
      iconSize: '32rpx',
      iconColor: '#ef473a',
    },
    {
      text: '安卓',
      icon: 'android',
      iconSize: '32rpx',
      iconColor: '#ef473a',
    },
  ],
  tabs3: [
    '英雄联盟',
    '绝地求生',
    'DNF',
    '炉石传说'
  ],
  tabs4: [
    'tab1',
    'tab2',
    'tab3',
    'tab4'
  ],
  tabs5: [
    'tab1',
    'tab2',
    'tab3',
    'tab4',
    'tab5',
    'tab6',
    'tab7',
    'tab8',
    'tab9',
    'tab10'
  ],
},
handleChange(e) {
  const index = e.detail.index;
  console.log(e);
},
handleSelected() {
  this.setData({
    index: 2,
  });
},
handleClick(e) {
  const { index, title } = e.detail;
  console.log('点击了tab:' + index, title);
},
onDisabled(e) {
  const { index, title } = e.detail;
  console.log('点击了禁用的:' + index, title);
},

.scroll-view_H {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 200px;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}
.scroll-view-item_H {
  width: 50%;
  height: 100%;
}
.bc_green {
  background-color: green;
}
.bc_red {
  background-color: red;
}
.bc_yellow {
  background-color: yellow;
}
.bc_blue {
  background-color: blue;
}
.content {
  padding: 20rpx 40rpx;
}

API

Attribute 属性

Event 事件

Slot 插槽

Class 自定义类名