devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app 自定义底部凸起导航栏_uniapp底部导航突出显示

作者：小蓝xlanll | 2024-02-19 06:39:07

赞

踩

uniapp底部导航突出显示

先上图

tabBar支持图片、iconfont图标展示

权限判断展示

  1. <template>
  2.     <view>
  3.         <view class="footer_box" :class="{ footer_bg: bg }">
  4.             <view v-for="(item, index) of navigationList" :key="index" class="footer_item" v-if="item.isShow">
  5.                 <view v-if="item.raised" class="footer_raised_item" @click="onRaised">
  6.                     <text class="iconfont icon-saoma" style="font-size: 90rpx;color: #999999;"></text>
  7.                 </view>
  8.                 <view v-else class="footer_nav_item" @click="onPageJump(item.pagePath)">
  9.                     <block v-if="item.isShow && item.selectedIconPath">
  10.                         <image v-if="item.pagePath == path" class="footer_nav_item_image" :src="item.selectedIconPath" mode="aspectFit"></image>
  11.                         <image v-else class="footer_nav_item_image" :src="item.iconPath" mode="aspectFit"></image>
  12.                         <text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
  13.                     </block>
  14.                     <block v-else-if="item.isShow">
  15.                         <text class="iconfont" :class="item.iconPath" :style="{'font-size': '45rpx','color': item.pagePath == path ? '#69C910':'#999999'}"></text>
  16.                         <text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
  17.                     </block>
  18.                 </view>
  19.             </view>
  20.         </view>
  21.         <view v-if="place" class="footer_station"></view>
  22.         <view class="lan-mask" v-if="popupShow" :style="'height: '+(phoneHeight - 100)+'rpx;'">
  23.             <view class="m-middle">
  24.                 <view class="m-middle-btn">扫描二维码</view>
  25.                 <view class="m-middle-btn">输入车编号</view>
  26.             </view>
  27.         </view>
  28.     </view>
  29. </template>
  1. <script>
  2. export default {
  3.     props: {
  4.         bg: {
  5.             type: Boolean,
  6.             default: true
  7.         },
  8.         place: {
  9.             type: Boolean,
  10.             default: true
  11.         }
  12.     },
  13.     data() {
  14.         return {
  15.             path: '',
  16.             phoneHeight: 0,
  17.             navigationList: [
  18.                 {
  19.                     pagePath: '/pages/equipment/manage/lanixong/visualization',
  20.                     iconPath: 'icon-ditu',
  21.                     isShow: true,
  22.                     text: '可视化'
  23.                 },
  24.                 {
  25.                     pagePath: '/pages/equipment/equipment',
  26.                     iconPath: '/static/icon/8d673f684b61101e7bb7342e3714078.png',
  27.                     selectedIconPath: '/static/icon/7314de4958d492a476b05fa0b2cb6b0.png',
  28.                     isShow: true,
  29.                     text: '设备'
  30.                 },
  31.                 {
  32.                     iconPath: 'icon-saoma',
  33.                     text: '扫一扫',
  34.                     isShow: true,
  35.                     raised: true
  36.                 },
  37.                 {
  38.                     pagePath: '/pages/equipment/manage/lanixong/manage',
  39.                     iconPath: 'icon-weixiu',
  40.                     isShow: true,
  41.                     text: '运维'
  42.                 },
  43.                 {
  44.                     pagePath: '/pages/user/user',
  45.                     iconPath: '/static/icon/d57d3d716d393498c227ff1d2f00abc.png',
  46.                     selectedIconPath: '/static/icon/ebfc732cdcdc515f2f26d44f263318c.png',
  47.                     isShow: true,
  48.                     text: '我的'
  49.                 }
  50.             ],
  51.             popupShow: false,
  52.             lookEquipment: false
  53.         };
  54.     },
  55.     //第一次加载
  56.     created() {
  57.         //查询权限
  58.         this.lookEquipment = uni.getStorageSync('lookEquipment')
  59.         //如果没有设备权限，那么可视化、运维不显示
  60.         if(!this.lookEquipment) {
  61.             this.navigationList.forEach((v) => {
  62.                 if(v.text == '可视化' || v.text == '运维') {
  63.                     v.isShow = false
  64.                 }
  65.             })
  66.         }
  67.         // 获取页面指针数组
  68.         let currentPages = getCurrentPages(); 
  69.         // 获取当前页
  70.         let page = currentPages[currentPages.length - 1]; 
  71.         // 当前页的路径
  72.         this.path = '/' + page.route; 
  73.         uni.getSystemInfo({ 
  74.                 success:(res)=> {
  75.                 this.phoneHeight = (res.screenHeight * (750 / res.windowWidth)) //窗口高度，将px 转换rpx
  76.             }            
  77.         })
  78.     },
  79.     //方法
  80.     methods: {
  81.         onPageJump(url) {
  82.             if (this.path !== url) {
  83.                 uni.reLaunch({
  84.                     url
  85.                 });
  86.             }
  87.         },
  88.         onRaised(){
  89.             this.popupShow = !this.popupShow;
  90.         }
  91.     }
  92. };
  93. </script>
  1. <style lang="scss" scoped>
  2. @import '@/style/mixin.scss';
  3.     @keyframes fade-in {
  4.         0% {
  5.             transform: scale(0);
  6.         }
  7.  
  8.         50% {
  9.             transform: scale(1.3);
  10.         }
  11.  
  12.         100% {
  13.             transform: scale(1);
  14.         }
  15.     }
  16.     .lan-mask {
  17.         position: fixed;
  18.         z-index: 99999;
  19.         top: 0;
  20.         left: 0;
  21.         right: 0;
  22.         bottom: 0;
  23.         width: 100vw;
  24.         display: flex;
  25.         flex-direction: column;
  26.         justify-content: center;
  27.         align-items: center;
  28.         background: rgba(255,255,255, 0.7);
  29.  
  30.         .m-middle {
  31.             border: 1px solid #999;
  32.             background: rgba(245,247,250, 0.9);
  33.             animation: fade-in 0.3s;
  34.             z-index: 10001111;
  35.             border-radius: 27upx;
  36.             padding: 35upx;
  37.  
  38.             .m-middle-btn {
  39.                 width: 400upx;
  40.                 height: 86upx;
  41.                 background: #68C90F;
  42.                 border-radius: 18upx;
  43.                 font-size: 32upx;
  44.                 font-weight: 600;
  45.                 color: #FFFFFF;
  46.                 line-height: 86upx;
  47.                 text-align: center;
  48.                 margin: 0 auto;
  49.             }
  50.             
  51.             .m-middle-btn:last-child {
  52.                 margin-top: 35upx;
  53.             }
  54.             
  55.         }
  56.     }
  57.  
  58. .footer_station {
  59.     height: 100rpx;
  60.     box-sizing: content-box;
  61.     // box-sizing: border-box;
  62.     padding-bottom: constant(safe-area-inset-bottom);  
  63.     padding-bottom: env(safe-area-inset-bottom); 
  64. }
  65. .footer_box {
  66.     height: 100rpx;
  67.     position: fixed;
  68.     bottom: 0;
  69.     left: 0;
  70.     width: 100%;
  71.     /* #ifndef APP-NVUE */
  72.     display: flex;
  73.     /* #endif */
  74.     flex-direction: row;
  75.     z-index: 502;
  76.     box-sizing: content-box;
  77.     // box-sizing: border-box;
  78.     padding-bottom: constant(safe-area-inset-bottom);  
  79.     padding-bottom: env(safe-area-inset-bottom); 
  80. }
  81. .footer_bg {
  82.     background-color: #FFF;
  83. }
  84. .footer_item {
  85.     position: relative;
  86.     flex: 1;
  87. }
  88. .footer_nav_item {
  89.     /* #ifndef APP-NVUE */
  90.     display: flex;
  91.     /* #endif */
  92.     flex-direction: column;
  93.     align-items: center;
  94.     justify-content: center;
  95.     height: 100%;
  96. }
  97. .footer_nav_item:active {
  98.     background-color: rgba($color: #fff, $alpha: 0.1);
  99. }
  100. .footer_nav_item_text {
  101.     font-size: 24rpx;
  102.     color: #999999;
  103.     margin-top: 6rpx;
  104. }
  105. .footer_nav_item_text_active {
  106.     color: #f9a633;
  107. }
  108. .footer_item_text_active {
  109.     color: #69C910;
  110. }
  111. .footer_nav_item_image {
  112.     width: 50rpx;
  113.     height: 50rpx;
  114. }
  115. .footer_raised_item {
  116.     position: absolute;
  117.     top: -40rpx;
  118.     left: 50%;
  119.     transform: translateX(-50%);
  120.     width: 120rpx;
  121.     height: 120rpx;
  122.     background-color: #FFF;
  123.     border-radius: 50%;
  124.     /* #ifndef APP-NVUE */
  125.     display: flex;
  126.     /* #endif */
  127.     align-items: center;
  128.     justify-content: center;
  129. }
  130. .footer_raised_item_image {
  131.     width: 70rpx;
  132.     height: 70rpx;
  133. }
  134. .popup_content {
  135.     background-color: #FFF;
  136.     padding: 30rpx;
  137. }
  138. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/113157?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号