uni-app导航栏的坑

最新推荐文章于 2023-10-31 09:43:52 发布
原创 最新推荐文章于 2023-10-31 09:43:52 发布 · 595 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

在uni-app开发中遇到App端导航栏样式问题，原样式与需求不符。官方文档指出，pages.json中的titleNView及plus API所用单位仅支持px，不支持rpx，这需要开发者进行相应调整。

1.要求的样式 跟给定的差很多 必须更改

1.App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。在这里插入图片描述

以下代码 是App端的获取以及设置

<template>
    <view class="content">
        <view :style=
最低0.47元/天 解锁文章
【uniapp】 解决 webview 返回无效
sxm的博客
09-10 4065
Webview 封装组件 <template> <view> <web-view :src="src"></web-view> </view> </template> <script> export default { props: { src: { type:String, default(){ return "" } } }, methods: {}
【Uni-app】在pages.json页面设置了小程序导航栏效果为什么不生效？
最新发布
LIN_OK_OKOK的博客
07-23 829
可能因为版本更新，所以在我跟着老师更改导航栏的效果时，按老师演示的办法（只在pages.json中修改导航栏效果）并不能达到修改的效果，导航栏还是默认设置的颜色。第一步，在unpackage文件夹中一路往下找，找到app.json文件，打开。第二步，在app.json文件中修改需要的导航栏属性即可，我这里修改的是颜色。在app.json中也修改好即可生效。
uni-app使用原生导航栏遇到的问题
weixin_43968842的博客
12-10 1892
贴上DCloud官方论坛中回答很详细的一个帖子【uni-app导航栏开发指南】 这里的一个小问题就是关于配置原生导航栏时，官网对于导航栏属性中的tags属性没有做很详细的内容叙述，详情要参考 5+View 使用uni-app的原生导航栏时，使用app-plus中的tags原生View，要如何监听事件？ pages.json文件： { "path": "pages/message/notifica...
uniapp中自定义返回和物理返回
qq_40666120的博客
11-27 2650
在pages.json中 可以使用自己去找的图标样式 { "path": "pages/myOrder/myOrder", "style": { "navigationBarTitleText": "我的订单", "navigationBarBackgroundColor":"#fff", "app-plus": { "titleNView": { "autoBackButton":"false", "buttons"
uni-app 页面样式
qq_57263284的博客
06-14 2164
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
精选资源
uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip
12-17
"uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip" 是一个针对uni-app框架的项目，其核心功能是实现自定义底部导航栏。uni-app是一个多端开发框架，允许开发者使用一套代码生成包括iOS、Android、H5...
uniapp框架-uni-app自定义导航栏-uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
精选资源
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
12-17
描述中提到的 "uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip" 指的是这个压缩包包含了一个uni-app项目，专门用于实现商品分类页面的侧边导航功能。"uni-app-left-navigation-master" ...
精选资源
uni-app网易云音乐实战
10-22
在本文中，我们将使用uni-app提供的组件来编写首页静态页面，包括头部、底部导航栏和中心内容区域。 推荐歌单 推荐歌单是网易云音乐应用程序的核心功能之一。在本文中，我们将使用后台接口...
精选资源
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
vue router带参数页面刷新或回退参数消失的解决方法
12-03
写在前面： 传参是前端经常需要用的一个操作，很多场景都会需要用到上个页面的参数，本文将会详细介绍vue router 是如何进行传参的，以及一些小细节问题。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。 Vue router如何传参 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。 路由界面： router.js: 路由设置这里，当你使用params
uniapp开发注意事项
qq_37049128的博客
06-16 1161
第一次用uniapp开发真的????了很多坑，每个项目都是在踩坑中不断的走过，不断得查资料解决中度过的，现对自己踩过的坑做一个总结，因为只涉及到app端，所以总结的可能不是都适用 1、在pages.json里的titleNView或页面里写的plus api中涉及的单位只支持px，不支持rpx 2、tenplate内引入静态资源，比如图片，视频的src属性时，可以使用相对路径或者绝对路径 3、静态文件目录下打js文件不会被编译，如果里面有es6的代码，不经过编译转换直接运行的话，在手机上是会报错的
uniapp新手必须的知道的坑
热门推荐
zsq199771的博客
06-10 1万+
有学过微信小程序开发和vue的，uniapp开发成本低，但是还是不能忽视了注意事项，别给自己带来麻烦，以下是我从官网上抽取的，希望接下来的开发能够顺利进行，文字有点多，但细看益处多多，go~~~ 开发工具下载标准版，在运行或发行uni-app时，会提示安装uni-app插件 下载App开发版，可开箱即用 如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 可以通过 vue-cli 创建 uni-app 项目。 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx
关于uni-app导航栏问题
weixin_46827289的博客
05-22 1529
这几天做uniapp的H5页面，上线后发现底部的导航栏，在我要打开键盘的时候，导航栏就被键盘顶上去了，现在记录一下解决办法
关于uni-app不兼容问题——导航栏
qq_45432996的博客
04-29 1511
设计稿的导航栏如上图↑ 在pages.json中添加代码；"navigationStyle":"custom",custom即取消默认的原生导航栏； 下一步就可以像写微信小程序那样写这个页面的样式： 此时会出现其他小程序出现两个样式了， 那么就需要判断一下，加上下面这段代码，别的小程序就不再会出现两个样式 ...
pages.json 中设置的导航栏按钮，点击的时候如何处理
学习笔记
06-12 1760
pages.json 中设置的导航栏按钮，点击的时候如何处理 pages.json 中设置的页面导航栏按钮，在点击的时候，会触发页面生命周期事件 onNavigationBarButtonTap 传递的参数就是这个按钮对象如图： export default { data() { return { }; }, onNavigationBarButtonTap(e){ console.log(e) } } ...
【uniapp】顶部和底部导航栏无法正常显示
花间半盘棋
10-31 5521
是否配置正确，如果配置多个菜单项，只要有1个路径配置正确就能正常显示，只是不能跳转。之后仍然不显示，需要检查。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值