【Taro】微信小程序自定义底部菜单

最新推荐文章于 2024-04-28 15:14:49 发布

Smile丶Code

最新推荐文章于 2024-04-28 15:14:49 发布

阅读量1.5k

点赞数

文章标签： js url 小程序 sms cms

本文链接：https://blog.csdn.net/itlsx/article/details/109309556

版权

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