vant-ui微信小程序版中的NavBar 导航栏上方有20px像素问题的解决方案

已于 2022-01-20 21:21:48 修改
阅读量1.4k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： ui 微信小程序 小程序
于 2022-01-20 21:20:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59254041/article/details/122610320
版权

vant-ui微信小程序版中的NavBar 导航栏上方有20px像素问题的解决方案

在目前最新版1.10.2的vant Weapp UI组件库的NavBar 导航栏有一个小bug。

在这里插入图片描述
头部导航栏与顶部多了20像素的内边距。

1.刚开始遇到这种问题直接选择查找css样式的类名，然后对其进行修改。发现更改失败

尝试了文档中的

  1. fixed 是否固定在顶部

  2. safe-area-inset-top 是否留出顶部安全距离（状态栏高度）

  3. custom-class 根节点样式

然后又尝试使用了

  1. /deep/ 深度作用选择器

  2. ! important 提升指定样式规则的应用优先权。

无一例外都失败了

最终解决方案

对源代码进行了更改。

位置：miniprogram_npm>@vant>weapp>nav-bar>index.wxml

改动前

最低0.47元/天 解锁文章
编程5分钟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vant NavBar 头部导航切换（项目中）
259的博客
12-31 1630
vant NavBar 头部导航切换（项目中）
vant NavBar 导航栏详解
zzx262625的博客
05-06 1051
vant是一个基于 Vue 的移动端 UI 组件库，而NavBar是其中的一个导航栏组件。下面是对vant的NavBar。
Vant组件NavBar和原生H5适配刘海屏，解决顶部不固定问题
05-31 6762
使用vant2在IOS有刘海屏手机上全屏展示会覆盖顶部，需要标题栏固定顶部，Tabs标签页固定在标题栏下方，都不随页面滑动 项目依赖： "dependencies": { "axios": "^0.27.2", "core-js": "^3.6.5", "vant": "^2.12.47", "vue": "^2.6.11", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDepend
小程序端自定义导航栏-样式适配-安全距离
最新发布
weixin_57334661的博客
05-16 421
"navigationStyle": "custom", // 隐藏默认导航。"navigationBarTitleText": "首页"-- ...省略 -->// 获取屏幕边界到安全区域距离。-- 顶部占位 -->适配之后：不同设备都有安全距离。解决：样式适配 - 安全距离。无设备安全距离时，被遮住。样式适配 -> 安全区域。1、隐藏默认导航栏，
Vant 顶部导航栏【van-tabs】Bug
weixin_30326741的博客
03-11 1867
Vant 顶部导航栏【van-tabs】Bug Vant 顶部导航栏【van-tabs】Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show="showSelWrap" > <van-tabs v-model="active"&g...
微信小程序自定义navbar
Smile_ping的博客
07-04 3736
自定义导航栏 项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现. 在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮. 公共的导航栏编写一个自定义组件调用. 欢迎大神们指教… 效果图 创建组件 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成. 首先需要在 json 文件中进行自定义组件声明, 将co...
使用vant 制作导航栏
马优晨
04-13 5296
先看一下实际登录效果图： 登录前： 登录后： 登录后其他页面： 使用说明： 语言vue UI库 vant 数据管理 vuex (1) 引入vant import Vue from 'vue'; import { NavBar } from 'vant'; Vue.use(NavBar); vant 基本用法 (2) 封住vue 组件 m-header view层 <t...
小程序固定头部实现：van-nav-bar插件
℡メ㏑╭ァ小凯
02-29 705
页面使用，放开注释的地方就可以显示左边按钮。
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
微信小程序实现左侧滑动导航栏
01-03
本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码，供大家参考，具体内容如下 左侧滑动导航栏如图 wxml <!-- 左侧滚动栏 --> <view class='under_line'></view> <scroll scroll-left={{...
vant-weapp_primitivezmf_vant-weapparea_图书馆座位预约_微信预约_微信小程序
09-11
这个应用名为“vant-weapp_primitivezmf_vant-weapparea_图书馆座位预约_微信预约_微信小程序”，从其标题我们可以提取出几个关键的技术点和功能特性。 首先，“vant-weapp”是一个重要的关键字，它表明此项目采用...
参照Vant-Weapp开发的抖音原生小程序UI组件库.zip
02-25
【标题】"参照Vant-Weapp开发的抖音原生小程序UI组件库"指的是一个基于Vant-Weapp设计思路创建的，专为抖音小程序设计的原生UI组件集合。Vant-Weapp是一个轻量级的小程序组件库，它在微信小程序中广泛使用，以其简洁...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
轻量，可靠的小程序UI组件库 介绍 Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并...
微信小程序（布局适配与物理逻辑像素）
woshierdanya的博客
08-16 2486
移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等 关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。 单位是英寸，1英寸=2.54厘米 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等 逻辑像素/设备独立像素DIP—WEB 逻辑像素/设备独立像素 ...
修改Vant组件库NavBar 导航栏的样式
h360583690的博客
10-28 8915
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotli..
html +vant 导航栏以及收起展开吸顶
weixin_65635437的博客
05-25 558
html +vant 导航栏以及收起展开吸顶
vant2 定制主题，NavBar 导航栏为例
weixin_47124112的博客
09-13 1928
注意像 @nav-bar-background-color 这些是不可以改变的，后面记得加分号’;在 main.js 里引入，要把css 的后缀名改为 less。第四步：在第二步新建的 theme.less 文件中配置。下面是 NavBar 导航栏提供的 less 变量。这里 vant 是使用全局引入的方式。
【uniapp】uniapp设置安全区域：
SunPeng的博客
08-11 3022
【uniapp】uniapp设置安全区域：
微信小程序 - Vant 实现自定义nav
iotjin的专栏
06-23 2724
demo 地址: https://github.com/iotjin/Jh_weapp 效果图： js 代码： Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, ClickBack(){ wx.navigateBack({ complete: (res) => {}, }) .
微信小程序使用vant ui框架实现点击左侧导航栏切换右边
09-04
微信小程序是一种能够在微信内部直接运行的应用程序。Vant是一款基于微信小程序开发的UI框架，它提供了丰富的组件和样式，能够快速搭建小程序的界面。 要实现点击左侧导航栏切换右边的功能，可以按照以下步骤进行操作： 1. 在小程序项目中引入Vant UI框架，可以通过npm命令安装vant-weapp包，在app.json文件中配置相关组件路径。 2. 创建一个包含左侧导航栏和右侧内容的页面。在页面的wxml文件中，使用Vant提供的`van-sidebar`组件作为左侧导航栏，使用`van-sidebar-item`组件作为导航栏中的每个选项。 3. 在页面的js文件中，监听左侧导航栏的点击事件。当点击左侧导航栏中的某个选项时，获取该选项的index值。 4. 根据获取到的index值，切换右侧内容的显示。在js文件中使用data中的变量来控制右侧显示的内容，在点击事件中更新data中的变量值，然后在wxml文件中使用条件渲染来显示不同的内容。 5. 在右侧内容中，可以使用Vant提供的其他组件，如`van-cell`、`van-button`等，来实现更丰富的功能。 通过以上步骤，就可以在小程序中使用Vant UI框架实现点击左侧导航栏切换右侧内容的功能了。Vant UI框架提供了丰富的组件和样式，可以帮助开发者快速搭建小程序界面，并为用户提供良好的使用体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值