TabSlider 滑动Tab切换

API#

tabSlider#

名称 类型 默认 说明
style Object {} 导航区域的外观样式
index number 0 默认初始化第几个tab,default
active number 0 受限切换tab
navTop boolean false 导航条位置
width number 750 swipe区
height number 1000 swipe区域的高度

方法#

名称 类型 默认 说明
onChange function(index) () 切换tab的回调

说明：

  • tabSlider依赖于slider组件，weex 中暂时没有提供不循环播放的功能（待完善）
  • index 参数 weex 中暂时没有支持(在8月底的版本才会发布，目前在测试版本)

tabSlider.pane#

名称 类型 默认 说明
title String 空 导航文字
icon Obeject：{src：xxx,selected:xxx} 空 导航图标,src:正常态，selected:选中态
style Object {} pane内容样式
num number 0 消息数，暂未提供，todo

一些特殊用法#

  • 当navTop为true时，pane导航条可能不再均分，当导航数小于等于5个时，采用均分策略。
  • 当导航数大于5时，每个导航item分得150rem。超出的导航可以点击选中，或通过滑动到可视区域内。

todo#

受限于weex，暂时还无法实现导航区域的自定义滚动

代码演示

预览 二维码 

/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,Image,TouchableHighlight,ScrollView} from 'nuke-components';
import { Button,Input,Icon,ListView } from 'nuke';
import { TabSlider } from 'nuke';
import {mount} from 'nuke-mounter';

const { Pane } = TabSlider;
let styles = {
  slider: {
    width: '750rem',
    position: 'relative',
    overflow: 'hidden',
    height: '452rem',
    backgroundColor: '#cccccc'
  },
  itemWrap: {
    width: '750rem',
    height: '352rem'
  },
  image: {
    width: '750rem',
    height: '352rem'
  },
  button: {
    marginTop: '20rem',
    width: '340rem',
    height: '80rem'
  },
  paginationStyle: {
    position: 'absolute',
    width: '750rem',
    height: '40rem',
    bottom: '20rem',
    left: 0,
    itemColor: 'rgba(255, 255, 255, 0.5)',
    itemSelectedColor: 'rgb(255, 80, 0)'
  },
  tab:{
    position:'relative',
    width:750,
    height:3000
  },
  tabBottom:{
    height:166,
    width:750,
    backgroundColor:'#333333',
    display:'flex',
    alignItems:'center',
    justifyContent:'middle'
  },
  barStyle:{
    backgroundColor:'#ffffff',
    height:200
  }
};

class NukeDemoIndex extends Component{
  constructor(props) {
    super(props);
    this.state =  {
            selectedTab: 'tab1',
            notifCount: 0,
            presses: 0,
            index:2,
            active:0
        };
  }

  sliderChange(index){
    console.log('slide-to', index);
  }

  btnClick(){
    console.log(this.state.active);
    this.setState({
      active:0
    })
  }

  _renderContent(color, pageText, num) {
      return (
        <View style={{ backgroundColor: color }}>
          <Text>{pageText}</Text>
        </View>
      );
  }

  render() {
      return (
        <View>
         <TabSlider width={750} height={1000} style={styles.barStyle} active={this.state.active}  index={this.state.index} onChange={this.sliderChange.bind(this)}>
            <Pane title={'首页'} icon={{src:'//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}} style={{width:750,height:1500,backgroundColor:'#414A8C'}}>
              <View>{this._renderContent('#414A8C', 'Blue Tab 大家好我是蓝色的区域')}</View>
            </Pane>  
            <Pane title={'个人'} icon={{src:'//img.alicdn.com/tfs/TB1aoTvMVXXXXaKaXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1AZ_yMVXXXXX8aXXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200,backgroundColor:'#783E33'}}>
              <View style={styles.tab}>{this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域', this.state.notifCount)}</View>
            </Pane>  
            <Pane title={'购物车1'} icon={{src:'//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane>  
            <Pane title={'购物车2'} icon={{src:'//img.alicdn.com/tfs/TB1UsjYMVXXXXXaXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB12mLPMVXXXXa5XFXXXXXXXXXX-64-64.png'}} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
        </TabSlider>
        <Button onPress={this.btnClick.bind(this)}>切换tab至第一个</Button>
       </View> 
        )
  }
}
mount(<NukeDemoIndex/>, mountNode);
tabSlider的使用
预览 二维码 

/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,Image,TouchableHighlight,ScrollView} from 'nuke-components';
import { Button,Input,Icon,ListView } from 'nuke';
import { TabSlider } from 'nuke';
import {mount} from 'nuke-mounter';

const { Pane } = TabSlider;
let styles = {
  slider: {
    width: '750rem',
    position: 'relative',
    overflow: 'hidden',
    height: '452rem',
    backgroundColor: '#cccccc'
  },
  itemWrap: {
    width: '750rem',
    height: '352rem'
  },
  image: {
    width: '750rem',
    height: '352rem'
  },
  button: {
    marginTop: '20rem',
    width: '340rem',
    height: '80rem'
  },
  paginationStyle: {
    position: 'absolute',
    width: '750rem',
    height: '40rem',
    bottom: '20rem',
    left: 0,
    itemColor: 'rgba(255, 255, 255, 0.5)',
    itemSelectedColor: 'rgb(255, 80, 0)'
  },
  tab:{
    position:'relative',
    width:750,
    height:3000
  },
  tabBottom:{
    height:166,
    width:750,
    backgroundColor:'#333333',
    display:'flex',
    alignItems:'center',
    justifyContent:'middle'
  },
  barStyle:{
    backgroundColor:'#ffffff',
    height:80,
    overflow:'hidden'
  }
};

class NukeDemoIndex extends Component{
  constructor(props) {
    super(props);
    this.state =  {
            selectedTab: 'tab1',
            notifCount: 0,
            presses: 0,
            index:2,
            active:0
        };
  }

  sliderChange(index){
    console.log('slide-to', index);
  }

  btnClick(){
    console.log(this.state.active);
    this.setState({
      active:0
    })
  }

  _renderContent(color, pageText, num) {
      return (
        <View style={{ backgroundColor: color,width:750,height:1000 }}>
          <View style={{position:'fixed'}}>
            <View style={{width:750,height:100,backgroundColor:'#333333'}}></View>
          </View>
        </View>
      );
  }

  render() {
      return (
        <View>
         <TabSlider navTop={true} width={750} height={1000} style={styles.barStyle} active={this.state.active}  index={this.state.index} onChange={this.sliderChange.bind(this)}>
            <Pane title={'首页'} style={{width:750,height:1200,backgroundColor:'#414A8C'}}>
              <View style={styles.tab}>{this._renderContent('#414A8C', 'Blue Tab 大家好我是蓝色的区域')}</View>
            </Pane>  
            <Pane title={'个人'} style={{width:750,height:1200,backgroundColor:'#783E33'}}>
              <View style={styles.tab}>{this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域', this.state.notifCount)}</View>
            </Pane>  
            <Pane title={'购物车1'} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane>  
            <Pane title={'购物车2'} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
            <Pane title={'购物车3'} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
            <Pane title={'购物车4'} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
            <Pane title={'购物车5'} style={{width:750,height:1200}}>
              <View style={styles.tab}>{this._renderContent('#21551C', 'Green Tab 大家好我是绿色的', this.state.presses)}</View>
            </Pane> 
        </TabSlider>
        <Button onPress={this.btnClick.bind(this)}>切换tab至第一个</Button>
       </View> 
        )
  }
}
mount(<NukeDemoIndex/>, mountNode);
类似于千牛头条中的slider效果
mobile phone header
mobile phone footer