From 71150d0ae755700dee7f570dc1404c68390ac64f Mon Sep 17 00:00:00 2001 From: wanganxp Date: Thu, 30 May 2024 04:04:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=87=AA=E5=AE=9A=E4=B9=89ta?= =?UTF-8?q?bbar=E7=9A=84=E6=B3=A8=E6=84=8F=E4=BA=8B=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/collocation/pagesjson.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/collocation/pagesjson.md b/docs/collocation/pagesjson.md index 64488078..4d0217c5 100644 --- a/docs/collocation/pagesjson.md +++ b/docs/collocation/pagesjson.md @@ -16,7 +16,7 @@ uni-app x的app平台，页面不再由webview渲染，其实不需要原生提 如pages.json中配置的导航栏和tabbar功能无法满足你的需求，可以不在pages.json中配置，自己用view做导航栏和tabbar。\ hello uni-app x有相关示例，参考： - 自定义导航栏：[插件地址](https://ext.dcloud.net.cn/plugin?id=14618) -- 自定义tabbar：[源码参考](https://gitcode.net/dcloud/hello-uni-app-x/-/tree/master/pages/template/custom-tab-bar) +- 自定义tabbar：[源码参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/custom-tab-bar/custom-tab-bar.uvue)；注意事项[见下](#pages-tabbar) 插件市场也有其他封装好的插件，请自行搜索。 ## 配置项列表 @@ -204,7 +204,12 @@ pages节点里注册页面，数据格式是数组，数组每个项都是一个 ### tabBar 配置项列表 @pages-tabbar -tabbar节点用于配置应用的tabbar，仅支持配置一个。如需在更多页面配置tabbar，请使用view自行封装。 +tabbar节点用于配置应用的tabbar，仅支持配置一个。如需在更多页面配置tabbar，见下面的自定义tabbar。 + +- 自定义tabbar：[源码参考](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/custom-tab-bar/custom-tab-bar.uvue) +自定义tabbar的逻辑较多，这里写出pages.json的tabbar的逻辑，供自定义tabbar参考： +1. tabbar页面刚开始只载入第一个子tab组件，其他tab组件是在点击相应的选项卡时v-if设为true来创建 +2. 一个子tab一旦被v-if加载后，不要再v-if设为false去掉，也不通过v-show控制，而是通过css的visibility来控制显示和隐藏。这样可以保留每个子tab的状态，比如滚动位置、输入框内容。切换tab也会更快速。 -- GitLab