taro 主题切换_taro scroll tabs 滚动标签 切换

taro scroll tabs

滚动标签 切换

taro

import Taro, {

Component,

} from '@tarojs/taro'

import {

View,

Text,

ScrollView,

} from '@tarojs/components'

import classnames from 'classnames'

import './TabList.scss'

export default class TabList extends Component {

state = {

active: 0,

}

componentWillMount() {

this.setState({

active: this.props.current || 0,

})

}

componentDidMount() {

}

componentWillReceiveProps(nextProps) {

const { current } = nextProps

if (current !== this.props.current) {

this.setState({

active: current,

})

}

}

onSelectTab(index) {

this.setState({

active: index,

})

this.props.onSelected && this.props.onSelected(index)

}

render() {

let { tabs, tabItemStyle, scrollWithAnimation } = this.props

let { active } = this.state

return (

tabs.length &&

scrollIntoView={`tab-${active >= 2 ? (active - 2) : 0}`}

>

{

tabs.map((item, index) => {

return (

'tab-item',

{

active: active === index,

},

])} onClick={this.onSelectTab.bind(this, index)} key={index} id={`tab-` + index}

>

{item.name}

)

})

}

)

}

}

TabList.defaultProps = {

tabs: [],

current: 0,

tabItemStyle: 'height:78rpx',

scrollWithAnimation: process.env.TARO_EN