vue3uniapp实现自定义拱形底部导航栏，解决首次闪烁问题

开心开心~~~~

已于 2024-10-30 15:17:36 修改

阅读量996

点赞数 5

CC 4.0 BY-SA版权

文章标签： uni-app 前端 vue.js

于 2024-10-30 15:15:48 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61848095/article/details/143365728

前言：

我最初在网上翻阅查找了很多方法，发现大家都是说在page.json中tabbar中添加："custom": true,即可解决首次闪烁的问题，可是添加了我这边还是会闪烁，因此我这边改变了思路，使用了虚拟页面来解决此问题。

效果图：

一：编写

1. 在page.json中写一个初始页面，pages中的第一个对象是默认展示第一个页面，所以一定要在写一个。

  "pages": [
        {
            "name": "index",
            "path": "pages/index/index",
            "style":{
                "navigationStyle":"custom"
            }
        },

2.新建index文件

3.编写index文件，因为我有三个页面，底部会有三个选项，每一个组件对应一个页面，Tabbr是我自定义的底部导航栏

    <view>
        <view>
            <view v-if="pageStatus[0]" class="page__container" :style="pageContainerStyle(0)">
                <scroll-view class="scroll-view" scroll-y>
                    <BasicPage />
                </scroll-view>
            </view>
            <view v-if="pageStatus[1]" class="page__container" :style="pageContainerStyle(1)">
                <scroll-view class="scroll-view" scroll-y>
                    <InquiriesPage />
                </scroll-view>
            </view>
            <view v-if="pageStatus[2]" class="page__container" :style="pageContainerStyle(2)">
                <scroll-view class="scroll-view" scroll-y>