- 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;
- }
- }
- }