123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- import React,{Component} from 'react';
- import Taro from '@tarojs/taro';
- import { View , CoverImage,CoverView } from '@tarojs/components'
- import './index.less'
- import icon_component from './image/icon_component.png';
- import icon_component_HL from './image/icon_component_HL.png';
- import icon_API from './image/icon_API.png';
- import icon_API_HL from './image/icon_API_HL.png';
- import {connect} from "react-redux";
- import {add, asyncAdd, minus} from "../actions/counter";
- @connect(({ counter }) => ({
- counter
- }), (dispatch) => ({
- add () {
- dispatch(add())
- },
- dec () {
- dispatch(minus())
- },
- asyncAdd () {
- dispatch(asyncAdd())
- }
- }))
- class CustomTabBar extends Component{
- constructor(props) {
- super(props);
- this.state={
- color: "#9C9ABB",
- selectedColor: "#76D3FF",
- list: [
- {
- pagePath: "/pages/index/index",
- iconPath: icon_component,
- selectedIconPath: icon_component_HL,
- text: "首页"
- },
- {
- pagePath: "/pages/index/index",
- iconPath: icon_API,
- selectedIconPath: icon_API_HL,
- text: "课程"
- },
- {
- pagePath: "/pages/user/index",
- iconPath: icon_API,
- selectedIconPath: icon_API_HL,
- text: "我的"
- },
- ]
- }
- this.switchTab = this.switchTab.bind(this);
- }
- switchTab(value,key) {
- Taro.switchTab({
- url: value.pagePath
- })
- }
- render() {
- return(
- <View className='tab-bar'>
- {/*<View className='tab-bar-border'/>*/}
- {
- this.state.list.map((v,key)=>(
- <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={()=>{
- this.switchTab(v,key);
- }}>
- {
- key !== 1 ?
- <>
- <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
- <View className='View' style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>
- {v.text}
- </View>
- </>:
- <View className='zhong'>
- <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
- <View className='View' style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>
- </View>
- }
- </View >
- ))
- }
- </View >
- )
- }
- }
- export default CustomTabBar;
|