index.jsx 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import React,{Component} from 'react';
  2. import Taro from '@tarojs/taro';
  3. import { View , CoverImage,CoverView } from '@tarojs/components'
  4. import './index.less'
  5. import icon_component from './image/icon_component.png';
  6. import icon_component_HL from './image/icon_component_HL.png';
  7. import icon_API from './image/icon_API.png';
  8. import icon_API_HL from './image/icon_API_HL.png';
  9. import {connect} from "react-redux";
  10. import {add, asyncAdd, minus} from "../actions/counter";
  11. @connect(({ counter }) => ({
  12. counter
  13. }), (dispatch) => ({
  14. add () {
  15. dispatch(add())
  16. },
  17. dec () {
  18. dispatch(minus())
  19. },
  20. asyncAdd () {
  21. dispatch(asyncAdd())
  22. }
  23. }))
  24. class CustomTabBar extends Component{
  25. constructor(props) {
  26. super(props);
  27. this.state={
  28. color: "#9C9ABB",
  29. selectedColor: "#76D3FF",
  30. list: [
  31. {
  32. pagePath: "/pages/index/index",
  33. iconPath: icon_component,
  34. selectedIconPath: icon_component_HL,
  35. text: "首页"
  36. },
  37. {
  38. pagePath: "/pages/index/index",
  39. iconPath: icon_API,
  40. selectedIconPath: icon_API_HL,
  41. text: "课程"
  42. },
  43. {
  44. pagePath: "/pages/user/index",
  45. iconPath: icon_API,
  46. selectedIconPath: icon_API_HL,
  47. text: "我的"
  48. },
  49. ]
  50. }
  51. this.switchTab = this.switchTab.bind(this);
  52. }
  53. switchTab(value,key) {
  54. Taro.switchTab({
  55. url: value.pagePath
  56. })
  57. }
  58. render() {
  59. return(
  60. <View className='tab-bar'>
  61. {/*<View className='tab-bar-border'/>*/}
  62. {
  63. this.state.list.map((v,key)=>(
  64. <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={()=>{
  65. this.switchTab(v,key);
  66. }}>
  67. {
  68. key !== 1 ?
  69. <>
  70. <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
  71. <View className='View' style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>
  72. {v.text}
  73. </View>
  74. </>:
  75. <View className='zhong'>
  76. <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
  77. <View className='View' style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>
  78. </View>
  79. }
  80. </View >
  81. ))
  82. }
  83. </View >
  84. )
  85. }
  86. }
  87. export default CustomTabBar;