uniapp 怎么设置凸起的底部tabbar

1. uniapp 怎么设置凸起的底部tabbar

在这里插入图片描述

1.1. 方案一系统提供

1.1.1. 使用uniapp官方提供的属性midButton

  使用时，list数组须为偶数
（1）pages.json

"tabBar": {
		"custom": true,
		"color": "#8F8F94",
		"selectedColor": "#007aff",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"iconWidth": "30px",
		"fontSize": "13px",
		"list": [
			{
				"pagePath": "pages/main/home/home",
				"iconPath": "static/main/icon_main_home_normal.png",
				"selectedIconPath": "static/main/icon_main_home_select.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/main/apply/apply",
				"iconPath": "static/main/icon_main_apply_normal.png",
				"selectedIconPath": "static/main/icon_main_apply_select.png",
				"text": "应用"
			},
			{
				"pagePath": "pages/main/msg/msg",
				"iconPath": "static/main/icon_main_msg_normal.png",
				"selectedIconPath": "static/main/icon_main_msg_select.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/main/mine/mine",
				"iconPath": "static/main/icon_main_mine_normal.png",
				"selectedIconPath": "static/main/icon_main_mine_select.png",
				"text": "我的"
			}
		],
		"midButton": {
			"pagePath": "pages/newsList/newsList",
			"iconPath": "static/main/icon_main_apply_normal.png",
			"selectedIconPath": "static/main/icon_main_apply_select.png",
			"width": "80px",
			"height": "80px",
			"iconWidth": "60px",
			"iconheight": "60px",
			"text": "会员"
		}

	},

（2）App.vue

<script>
    export default {


        onLaunch: function() {
            console.log('App Launch')

            //监听凸起页面
            uni.onTabBarMidButtonTap(()=>{
                console.log('App La345unch')
                uni.navigateTo({
                    url: './pages/newsList/newsList'
                });
            })
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>

1.2. 自定义tabBar组件

1.2.1. 把pages.json里的 “custom”: true,

  新建组件tabBar.vue
在这里插入图片描述
（1）tab-bar.vue

<template>
    <view class="tab-layout">
        <ul class='tab-ul-layout'
            :class="showMiddleButton === true?'tab-item-middle':'tab-item-default'">
            <li v-for="(item, index) in tabList"
                class="tab-item-normal"
                :class="item.middleClass"
                @click="handlePush(item, index)"
                :key="index">
                <view class="item-img-box">
                    <image class="item-img"
                           :src="tabIndex == index ?
                           item.selectedIconPath : item.iconPath"/>
                </view>
                <view :class="tabIndex == index?
                'tab-item-title-select item-text2'
                :'tab-item-title-normal item-text'">
                    {{item.text}}
                </view>
            </li>
        </ul>
    </view>
</template>

<script>
    export default {
        props: {
            tabIndex: { //当前选中的tab项
                type: String,
                default: 0
            }
        },
        data() {
            return {
                /*
                 * iconPath: 默认icon图片路径
                 * selectedIconPath: 选中icon图片路径
                 * text: tab按钮文字
                 * pagePath:页面路径
                 * middleClass:中间按钮样式类名
                 * tabList最小两项，最多五项
                 * tabList长度为奇数时，中间按钮才会突出显示
                 *
                 */
                tabList: [
                    {
                        iconPath: '/static/main/icon_main_home_normal.png',
                        selectedIconPath: '/static/main/icon_main_home_select.png',
                        text: '首页',
                        pagePath: '/pages/main/home/home',
                        middleClass: ''
                    },
                    {
                        iconPath: '/static/main/icon_main_apply_normal.png',
                        selectedIconPath: '/static/main/icon_main_apply_select.png',
                        text: '审批',
                        pagePath: '/pages/main/approval/approval',
                        middleClass: ''
                    },
                    {
                        iconPath: '/static/main/icon_main_apply_normal.png',
                        selectedIconPath: '/static/main/icon_main_apply_select.png',
                        text: '工作台',
                        pagePath: '/pages/main/apply/apply',
                        middleClass: 'tab-item-middle'
                    },
                    {
                        iconPath: '/static/main/icon_main_msg_normal.png',
                        selectedIconPath: '/static/main/icon_main_msg_select.png',
                        text: '消息',
                        pagePath: '/pages/main/msg/msg',
                    },
                    {
                        iconPath: '/static/main/icon_main_mine_normal.png',
                        selectedIconPath: '/static/main/icon_main_mine_select.png',
                        text: '我的',
                        pagePath: '/pages/main/mine/mine',
                        middleClass: ''
                    }
                ],
                showMiddleButton: false,
            };
        },
        computed: {
            getHeight() {
                return Number(this.height);
            },
        },
        mounted() {


        },
        methods: {
            //点击按钮
            handlePush(item, index) {
                if (this.tabIndex !== index) {
                    // uni.reLaunch({
                    //     url: `${item.pagePath}?tabIndex=${index}`,
                    // })
                    uni.switchTab({
                        url: `${item.pagePath}?tabIndex=${index}`,
                    });
                }
            },
        }
    }
</script>

<style lang="scss">
    .tab-layout{
        width: 100vw;
    }
    .tab-ul-layout {
        align-items: center;
        justify-content: center;
        height: 80px;
        padding: 0; //解决偏移
        display: flex;
        flex-flow: row wrap;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        background-size: contain;
        width: 100vw;
    }


    .tab-item-default {
        background-color: #FFFFFF;
        border-top: 1px #dddddd solid;
    }

    .tab-item-middle {
        position: relative;
        /*background-image: url("https://res/nav_bar_bg_2x.png");*/
        /*background-repeat: no-repeat;*/
        background-size: cover;
    }

    .tab-item-normal {
        flex: 1;
        flex-direction: column;
        align-items: center;
        display: flex;

        .item-img-box {
            width: 44px;
            height: 42px;
            margin-bottom: 1px;
            position: relative;
        }

        .item-img {
            width: 44px;
            height: 42px;
        }

        .item-text {

        }

        .item-text2 {

        }
    }

    .tab-item-middle {
        position: relative;

        .item-img-box {
            position: absolute;
            width: 106px;
            height: 106px;
            z-index: 1002;
            bottom: 1px;
        }

        .item-img {
            width: 106px;
            height: 106px;
        }

        .item-text {
            position: absolute;
            z-index: 1002;
            bottom: -20px;
        }

        .item-text2 {
            position: absolute;
            z-index: 1002;
            bottom: -20px;
        }
    }
    .tab-item-title-normal {
        font-size: 20px;
        color: #333333;
    }

    .tab-item-title-select {
        font-size: 20px;
        color: #007aff;
    }

</style>

</style>

（2）pages.json

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/main/home/home",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/main/msg/msg",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/main/work/work",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }
    },
    {
      "path": "pages/main/mine/mine",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/main/apply/apply",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    },
    {
      "path": "pages/newsList/newsList",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }
    },

    {
    	"path" : "pages/main/approval/approval",
    	"style" :
    	{
    		"navigationBarTitleText" : "",
    		"enablePullDownRefresh" : false
    	}
    }
  ],
  "tabBar": {
    "custom": true,
    "color": "#8F8F94",
    "selectedColor": "#007aff",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "iconWidth": "30px",
    "fontSize": "13px",
    "list": [
      {
        "pagePath": "pages/main/home/home",
        "iconPath": "static/main/icon_main_home_normal.png",
        "selectedIconPath": "static/main/icon_main_home_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/main/apply/apply",
        "iconPath": "static/main/icon_main_apply_normal.png",
        "selectedIconPath": "static/main/icon_main_apply_select.png",
        "text": "应用"
      },
      {
        "pagePath": "pages/main/approval/approval",
        "iconPath": "static/main/icon_main_apply_normal.png",
        "selectedIconPath": "static/main/icon_main_apply_select.png",
        "text": "工作台"
      },
      {
        "pagePath": "pages/main/msg/msg",
        "iconPath": "static/main/icon_main_msg_normal.png",
        "selectedIconPath": "static/main/icon_main_msg_select.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/main/mine/mine",
        "iconPath": "static/main/icon_main_mine_normal.png",
        "selectedIconPath": "static/main/icon_main_mine_select.png",
        "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {}
}

（3）home.vue

<template>
    <view class="content">
        <view class="text-area">
            <text class="title">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
            <text class="title2">{{title}}</text>
        </view>
        <tabBar class="my" tabIndex=0></tabBar>
    </view>
</template>

<script>
    import tabBar from '../../../components/tab-bar'

    export default {
        components: {
            tabBar
        },
        data() {
            return {
                title: '我是首页'
            }
        },
        onLoad() {

        },
        methods: {}
    }
</script>

<style>
.my{ width: 100vw}
.text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.title {
    font-size: 36rpx;
    color: #8f8f94;
}
.title2 {
    font-size: 36rpx;
    color: #8f8f94;
    margin-top: 300rpx;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/670552.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

推荐网站（19）anytools图片分辨率处理网站

推荐网站（19）anytools图片分辨率处理网站

今天&#xff0c;我要向您推荐一个非常实用的在线图片处理工具网站——AnyTools。这个网站提供了一站式的图片分辨率处理服务&#xff0c;并且具备添加各种过滤器的功能&#xff0c;非常适合需要快速调整图片大小和风格优化的场合。 多分辨率支持&#xff1a;用户可以自定义图片…
阅读更多...
（南京观海微电子）——LVD屏介绍

（南京观海微电子）——LVD屏介绍

LVDS&#xff08;Low Voltage Differential Signaling&#xff0c;即 低电压差分信号 &#xff09; 接口又称 RS-644 总线接口&#xff0c;是20世纪90年代才提出的一种 数据传输 和接口技术。 LVDS接口是美国NS美国国家半导体公司为克服以 TTL电平 方式传输宽带高码率数据时功…
阅读更多...
Linux--线程的互斥

Linux--线程的互斥

线程系列&#xff1a; 一、线程的认识&#xff1a;线程的认识&#xff1a;误进解线程的概念和线程的基本控制 二、Linux–线程的分离、线程库的地址关系的理解、线程的简单封装 线程的互斥 线程互斥&#xff08;Thread Mutual Exclusion&#xff09;是多线程编程中的一个重要概…
阅读更多...
软件测试进阶

软件测试进阶

目录 一、自动化测试 1.概念 2.Selenium 2.1 概念 2.1.1 Selenium是什么&#xff1f; 2.1.2 Selenium特点 2.1.3 工作原理 2.2 SeleniumJava环境搭配 2.3 定位元素 2.3.1 CSS语法 2.3.2 XPath语法 2.4 应用 2.4.1 点击提交文本 2.4.2 模拟输入 2.4.3 清除文本 2…
阅读更多...
驰骋低代码开发平台概念与主张

驰骋低代码开发平台概念与主张

驰骋低代码开发平台概念与主张 一、引言 在数字化转型的浪潮中&#xff0c;低代码开发平台因其高效、灵活、成本效益显著的特点&#xff0c;逐渐成为企业快速构建应用系统的首选。作为国内领先的开源低代码开发平台&#xff0c;驰骋低代码致力于为企业和开发者提供一套全面、…
阅读更多...
（南京观海微电子）——屏幕材质及优缺点对比

（南京观海微电子）——屏幕材质及优缺点对比

LED/LCD LCD&#xff08;Liquid Crystal Ddisplay&#xff09;即“液晶显示器”&#xff0c;由两块偏光镜、两块薄膜晶体管以及彩色滤光片、光源&#xff08;荧光灯&#xff09;、显示面板组成的成像元器件。 LED&#xff08;Light Emitting Diode&#xff09;即“发光二极管…
阅读更多...
冒泡排序与快速排序

冒泡排序与快速排序

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 关注博主带你了解更多数据结构知识 1.冒泡排序 冒泡排序 private static void swap(int[] arrary,int i,int j){int tmp arrary[i];arrary[i] arrary[j];arrary[j] tmp;public static void bubbl…
阅读更多...
[docker] docker 安全知识 - docker api, 权限提升 资源管理

[docker] docker 安全知识 - docker api, 权限提升 资源管理

[docker] docker 安全知识 - docker api, 权限提升 & 资源管理 这是 docker 安全的最后一篇 暴露 docker api 在 [docker] docker 安全知识 - docker 系统性简介 中曾经提到&#xff0c;docker cli 使用 restful api 与客户端和 docker daemon 之间交流。默认情况下&…
阅读更多...
国内的期权模拟账户怎么申请？

国内的期权模拟账户怎么申请？

国内的期权模拟账户可以在券商和期权分仓平台处申请开通&#xff0c;期权相比于股票具有杠杆投资、风险控制等新特性。 期权模拟交易客户端能够提供期权的开平仓交易、备兑开仓&#xff0f;平仓、行权等交易指令&#xff0c;下文为大家介绍国内的期权模拟账户怎么申请&#xff…
阅读更多...
安卓模拟键盘蓝牙电脑apk

安卓模拟键盘蓝牙电脑apk

蓝牙连接电脑就可以使用了。 下载地址&#xff1a;点击下载https://download.csdn.net/download/jasonhongcn/89382597
阅读更多...
【基础算法总结】模拟算法

【基础算法总结】模拟算法

模拟算法 1.替换所有的问号2.提莫攻击3.Z 字形变换4.外观数列5.数青蛙 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 模拟算法 —> 比葫芦…
阅读更多...
npm发布、更新、删除包

npm发布、更新、删除包

如何将自己开发的依赖包发布到npmjs上供别人使用&#xff1f;五个步骤搞定&#xff01; 实现步骤&#xff1a; 创建自己的工具包项目&#xff0c;进行开发。注册npmjs账号。执行npm login在控制台登录&#xff0c;填写用户信息。执行npm publish发布包。更新及删除。 步骤一…
阅读更多...
Leetcode - 周赛399

Leetcode - 周赛399

目录 一&#xff0c;3162. 优质数对的总数 I 二&#xff0c;3163. 压缩字符串 III 三&#xff0c;3164. 优质数对的总数 II 四&#xff0c; 3165. 不包含相邻元素的子序列的最大和 一&#xff0c;3162. 优质数对的总数 I 假设 x 是 nums1 数组中的值&#xff0c;y 是 nums2…
阅读更多...
Docker部署SiYuan笔记-Unraid

Docker部署SiYuan笔记-Unraid

使用unraid的docker部署SiYuan笔记&#xff0c;简单记录 笔记说明 Siyuan笔记是一款基于markdown语法的笔记工具&#xff0c;具有活跃的社区和多设备支持。大部分功能都是免费&#xff0c;源代码开源&#xff0c;支持插件安装&#xff0c;具有很不错的使用体验。 Docker地址&a…
阅读更多...
【应用层】 DNS 域名协议解析

【应用层】 DNS 域名协议解析

文章目录 DNS(Domain Name System)出现及演化 ⏳DNS 概括&#x1f50d;DNS定义DNS 作用 DNS工作原理⚙️域名解析DNS解析的详细工作流程 DNS域名解析方式&#x1f504;静态DNS域名解析动态DNS域名解析 DNS域名解析过程的深入分析 &#x1f9d0;递归查询迭代查询 公共DNS服务器的…
阅读更多...
Python 机器学习 基础 之 处理文本数据 【停用词/用tf-idf缩放数据/模型系数/多个单词的词袋/高级分词/主题建模/文档聚类】的简单说明

Python 机器学习 基础 之 处理文本数据 【停用词/用tf-idf缩放数据/模型系数/多个单词的词袋/高级分词/主题建模/文档聚类】的简单说明

Python 机器学习 基础 之 处理文本数据 【停用词/用tf-idf缩放数据/模型系数/多个单词的词袋/高级分词/主题建模/文档聚类】的简单说明 目录 Python 机器学习 基础 之 处理文本数据 【停用词/用tf-idf缩放数据/模型系数/多个单词的词袋/高级分词/主题建模/文档聚类】的简单说明…
阅读更多...
AI帮写：探索国内AI写作工具的创新与实用性

AI帮写：探索国内AI写作工具的创新与实用性

随着AI技术的快速发展&#xff0c;AI写作正成为创作的新风口。但是面对GPT-4这样的国际巨头&#xff0c;国内很多小伙伴往往望而却步&#xff0c;究其原因&#xff0c;就是它的使用门槛高&#xff0c;还有成本的考量。 不过&#xff0c;随着GPT技术的火热&#xff0c;国内也涌…
阅读更多...
Keras深度学习框架实战（3）：EfficientNet实现stanford dog分类

Keras深度学习框架实战（3）：EfficientNet实现stanford dog分类

1、通过EfficientNet进行微调以实现图像分类概述 通过EfficientNet进行微调以实现图像分类&#xff0c;是一个使用EfficientNet作为预训练模型&#xff0c;并通过微调&#xff08;fine-tuning&#xff09;来适应特定图像分类任务的过程。一下是对相关重要术语的解释。 Effici…
阅读更多...
【气象常用】剖面图

【气象常用】剖面图

效果图&#xff1a; 主要步骤&#xff1a; 1. 数据准备&#xff1a;我用的era5的散度数据&#xff08;大家替换为自己的就好啦&#xff0c;era5数据下载方法可以看这里【数据下载】ERA5 各高度层月平均数据下载_era5月平均数据-CSDN博客&#xff09; 2. 数据处理&#xff1a…
阅读更多...
高考试卷押运车视频监控解决方案

高考试卷押运车视频监控解决方案

一、引言 高考作为我国教育领域的重要事件&#xff0c;其公正、公平和安全性一直备受社会关注。试卷押运作为高考的重要环节&#xff0c;其安全性直接关系到高考的顺利进行和考生的切身利益。因此&#xff0c;对高考试卷押运车实施视频监控解决方案&#xff0c;对于确保试卷安…
阅读更多...
最新文章

Copyright @ 2022~2023