index.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <view class="page_body">
  3. <!-- 课程中心 -->
  4. <course-center></course-center>
  5. <!-- 底部tabbar -->
  6. <page-tabbar :tabBarValue="state.tabBarValue" :tabBarList="state.tabBarList" @ChangeTabBarValue="ChangeTabBarValue"></page-tabbar>
  7. </view>
  8. </template>
  9. <script setup>
  10. import pageTabbar from '@/components/page-tabbar.vue';//头部
  11. import courseCenter from './courseCenter/index.vue';
  12. import { reactive, ref } from 'vue';
  13. const state = reactive({
  14. tabBarValue:'courseCenter',
  15. tabBarList:[{
  16. "pathName":"courseCenter",
  17. "iconPath": "/static/image/tabbar/courseCenter.png",
  18. "selectedIconPath": "/static/image/tabbar/courseCenter_cur.png",
  19. "text": "课程中心"
  20. },{
  21. "pathName":"myLearning",
  22. "iconPath": "/static/image/tabbar/myLearning.png",
  23. "selectedIconPath": "/static/image/tabbar/myLearning_cur.png",
  24. "text": "我的研修"
  25. },{
  26. "pathName":"learningMonitor",
  27. "iconPath": "/static/image/tabbar/learningMonitor.png",
  28. "selectedIconPath": "/static/image/tabbar/learningMonitor_cur.png",
  29. "text": "研修监控"
  30. }]
  31. })
  32. //切换tabBar
  33. const ChangeTabBarValue = (name) => {
  34. state.tabBarValue = name;
  35. }
  36. </script>
  37. <style lang="scss">
  38. </style>