import Taro, {View,Image} from '@tarojs/components'
import PropTypes from 'prop-types'
import LsxComponent from '../component'
import './index.less'
export default class TabBar extends LsxComponent {
constructor (props) {
super(props);
this.state = {
navList: [
{
name: "首页",
url: "index",
icon: "https://cdn-test.51nwds.com/mall/0_0_0_0_7ce5f3a34c64d8db6b973c1f1acb13a7.png",
iconCur: "https://cdn-test.51nwds.com/mall/0_0_0_0_b5751010c24636148ecfd93ab783d444.png"
},
{
name: "我的",
url: "member",
icon: "https://cdn-test.51nwds.com/mall/0_0_0_0_41acee9b859731a6a9f9a9d2da3c6c41.png",
iconCur: "https://cdn-test.51nwds.com/mall/0_0_0_0_f0314c9f6755b92700b3859a948d5a4d.png"
}
]
}
}
goRedirectTo(url){
if(url !== this.props.curNav){
Taro.redirectTo({
url: '/pages/' + url + '/' + url
});
}
}
render () {
const {
curNav
} = this.props;
const {
navList
} = this.state;
return <View className='lsx-tabBar'>
{
navList.map((item, i) =>
<View key={i} className={`lsx-tabBar__item ${curNav === item.url ? 'active' : ''}`} onClick={this.goRedirectTo.bind(this, item.url)}>
<View className='lsx-tabBar__item-icon'>
<Image className='lsx-tabBar__item-icon-img' src={curNav === item.url ? item.iconCur : item.icon}/>
</View>
<View className='lsx-tabBar__item-text'>{item.name}</View>
</View>
)
}
</View>
}
}
TabBar.defaultProps = {
curNav: ''
};
TabBar.propTypes = {
curNav: PropTypes.string
};
@import '../themes/index.less';
.lsx-tabBar {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
height: calc(108px + env(safe-area-inset-bottom)/2);
float: left;
display: flex;
justify-content : space-around;
border-top: 1px solid #efefef;
background-color: #fff;
.lsx-tabBar__item {
display: block;
position: relative;
padding-top: 10px;
&.active{
color: #FF2424;
.lsx-tabBar__item-text{
color: #FF2424;
}
}
.lsx-tabBar__item-icon {
display: flex;
justify-content: center;
.lsx-tabBar__item-icon-img {
width: 48px;
height: 48px;
}
}
.lsx-tabBar__item-text {
text-align: center;
font-size: 24px;
color: #cccccc;
}
}
}