footer.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view>
  3. <view style="height: 100rpx;"></view>
  4. <view class="com_footer">
  5. <view class="in_item" v-for="(item,k) in footlist" :key="k" @click="gotopage(item)">
  6. <image class="in_img" v-if="active == item.module" :src="item.icon_checked" mode="scaleToFill"></image>
  7. <image class="in_img" v-else :src="item.icon_nochecked" mode="scaleToFill"></image>
  8. <view class="in_txt" v-if="active == item.module" :style="'color: #'+color_checked">{{item.title}}</view>
  9. <view class="in_txt" v-else :style="'color: #'+color_nochecked">{{item.title}}</view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. // import api from '../../api/api.js'
  16. // import plugins from '../../commen/js/plugin.js'
  17. export default {
  18. props:[
  19. 'footerindex'
  20. ],
  21. data () {
  22. return{
  23. active :'',
  24. footlist:[
  25. {module:'home',title:'首页',img:"imga",icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png')},
  26. {module:'video',title:'视频',img:"imgb",icon_checked:require('@/static/images/tabbar/video_.png'),icon_nochecked:require('@/static/images/tabbar/video.png')},
  27. {module:'mine',title:'我的',img:"imga",icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
  28. ],
  29. color_checked :'161616',
  30. color_nochecked :'666666',
  31. }
  32. },
  33. mounted() {
  34. var that = this;
  35. this.active = this.footerindex;
  36. },
  37. methods:{
  38. // 跳转底部导航页面
  39. gotopage(e){
  40. var that = this;
  41. let link = e.link, module = e.module, def = e.default, title = e.title;
  42. if(module == 'home'){
  43. this.$tab.reLaunch('/pages/index/index')
  44. }else if(module == 'video'){
  45. this.$tab.reLaunch('/pages/video/index')
  46. }else if(module == 'mine'){
  47. this.$tab.reLaunch('/pages/mine/index')
  48. }
  49. },
  50. }
  51. }
  52. </script>
  53. <style type="text/css">
  54. .com_footer{ display: flex;position: fixed;box-sizing: border-box;z-index: 98;width: 100%;height: 100rpx;bottom: 0;left: 0;background-color: #fff;overflow: hidden;box-shadow: 0px 0px 16rpx 0px rgba(87,87,87,0.41);}
  55. .com_footer .in_item{ display: block;flex: 1;padding: 12rpx 0 0 0;overflow: hidden; }
  56. .com_footer .in_img{ display: block;width: 44rpx;height: 44rpx;margin: 0 auto; }
  57. .com_footer .in_txt{ font-size: 26rpx;color: #999;text-align: center; font-weight: bold;}
  58. .com_footer .in_txt_on{ color: #20AD20; }
  59. </style>