【微信小程序】学习笔记-----navigation-bar导航栏

最新推荐文章于 2023-10-26 18:01:13 发布
最新推荐文章于 2023-10-26 18:01:13 发布
阅读量283 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 学习 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49668076/article/details/127224619
版权

微信官方文档----小程序

微信小程序底部的导航栏不需要自己画，通过配置即可

在这里插入图片描述
先配置list数组，tab的列表
在app.json中与其他项平级，当输入tabBar的时候会自动填补齐全，这里要注意，控制台报错至少需要两项，文档中也有说明，至少2个，最多5个
在这里插入图片描述
未找到iconPath和selectedIconPath路径，即选中和未选中的图片路径
在这里插入图片描述
当把路径等都配置好后，导航栏也就完成了
在这里插入图片描述
在这里插入图片描述
备注：快速创建包含wxss/js/json/wxml的文件夹，在app.json中定义好路径后会自动生成

在这里插入图片描述

春晓_春眠花落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序自定义导航栏，页面滚动到一定高度时，加上背景色，用到了节流函数和函数防抖
Zan_Z的博客
04-09 1708
下面展示一些 内联代码片。 // An highlighted block var foo = 'bar'; 下面展示一些 内联代码片。 // An highlighted block var foo = 'bar'; util.js文件里写函数节流和函数防抖。 module.exports = { throttle: throttle, debounce: debounce } /...
微信小程序去除左上角返回键的实现方法
10-15
主要介绍了微信小程序去除左上角返回键的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序坑位总结
qq_35629054的博客
07-22 1822
最近公司项目使用微信小程序做项目，踩坑3个月，给大家总结一下最近遇到的问题： 1、首先说一下npm包的使用 点击这里的 ’构建npm即可‘，但是构建之前记得要在工程中先执行npm init命令，否则会报’找不到Rootminiprogram_npm‘之类的错误，这个是比较坑的，大多数新手第一次使用第三方的npm包都会犯这个错误，省的大家百度了。 2、小程序的自定义导航栏 先来说明一下使用方法： 1、 使用npm i weui-miniprogram 命令下载微信官方的ui组件库 2、按照官方文档，在a
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
一片天空
05-11 1万+
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 3385
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
微信小程序自定义navigationBar、自定义标题栏
weixin_46265708的博客
10-18 9718
自定义导航栏核心在于导航栏的高度定位，这样才能准确定位自定义的返回按钮以及其他按钮的位置，与原生胶囊保持一致。至于wxml的布局方法多种多样，上面只是列出了笔者的一种写法。学习小程序，自定义导航栏是很重要的技能，其间的逻辑并不复杂，还是和学习前端一样，需要非常细心耐心，才能做好细节工作wx.getSystemInfo()获取到的参数。
微信自定义组件---标签式导航栏
11-29
微信小程序的自定义组件，支持自行定义item元素样式，横向滚动并且能够隐藏滚动条，监听item点击事件。
chip-navigation-bar：一个Android导航栏小部件
02-04
chip-navigation-bar：一个Android导航栏小部件
react-native-pure-navigation-bar:React Native中完全可定制的导航栏
05-17
React本地纯导航栏 这是React-Native中一个完全可定制的导航栏。 您可以设置导航栏的全局统一样式...npm install --save react-native-pure-navigation-bar 用法 首先导入文件： import NaviBar from 'react-native
React Native react-navigation 导航使用详解
08-28
本篇文章主要介绍了React Native react-navigation 导航使用详解，详解的介绍了react-navigation导航的使用，具有一定的参考价值，有兴趣的可以了解一下
swift-iOS自定义导航栏-导航栏联动
08-15
现在大多数的APP都有导航栏联动效果，即滑动返回的时候导航栏也跟着一起返回，比如：网易新闻，网易云音乐，腾讯视频等等，于是通过查找一些资料及其他库的做法，自己也写了一个框架，可以让每一个控制器都拥有自己...
微信小程序自定义导航栏navigationBar
weixin_43424672的博客
03-17 8311
这里使用三段论是什么为什么怎么做来阐述自定义navigationBar，如果只关心怎么做可直接跳至怎么做段落。 navigationBar是什么？ 微信小程序一般来说有两个bar，一个导航栏，一个tabbar（小程序下方一排切换按钮），实现下方自定义tabbar的方法一般来说较为简单，现在着重叙述上方自定义导航栏的实现。 小程序布局 谈到导航栏与自定义导航栏，就需要解释一下微信小程序的布...
android studio 顶部导航栏_微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）...
weixin_39784460的博客
11-23 1068
本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。思路隐藏原生样式获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算出该机型的导...
微信小程序自定义navigationbar
最新发布
qq_52624304的博客
10-26 703
在开发过程中，遇到自定义navigationbar的问题，已解决，做记录用下面的代码的自定义navigationbar，效果为页面未滚动时，背景透明，无页面标题；页面滚动，背景颜色改变，页面标题出现。整体代码适用于与单个页面设置。
微信小程序自定义select下拉选项框
qsj0606的博客
10-26 1599
第一步：创建组件所需的文件 第二步：开始配置组件 select.json { "component": true, "usingComponents": { "select": "./select" } } 第三步：自定义组件样式及js select.wxml <view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
热门推荐
weianl的博客
01-02 2万+
最近在写商城，中途遇到了需要自定义修改导航栏的操作，大概是如下图接过样子的，于是想手写一份，但我发现右上分的分享按钮在不同设备离顶部的距离是不一样的，于是找了下官方程序员写的文档(点这里查看)，(⊙o⊙)…一脸懵逼咧，貌似不能满足这需求，而且后续也要实现点击导航滚动定位，组件传参麻烦，而且未必能实现，于是我把WeUI的navigation-bar组件的精华提取出来写了一份。 wxml文件 &lt...
自定义导航栏（navigation-bar.1.0.0.js）
Huazie
11-16 1683
自定义导航栏，类似手机中选项卡切换的导航栏
微信小程序--动态设置导航栏颜色 (navigationBarBackgroundColor)
qq_36770411的博客
09-07 4518
如果导航栏被隐藏或者页面没有设置导航栏，设置导航栏颜色将会失败。如果尝试了以上方法仍然无法解决问题，建议检查微信小程序开发工具的版本，确保使用的是最新稳定版，或者尝试重启开发工具和手机。检查是否有其他代码逻辑或插件影响了导航栏的设置。可能存在其他代码或插件对导航栏进行了修改或覆盖导致设置失败。确保使用有效的十六进制颜色值或颜色名称，并且以字符串形式传入。中调用，或者在需要设置导航栏颜色的事件触发时调用。来启用原生导航栏样式，并获得设置导航栏颜色的权限。检查是否有权限设置导航栏颜色。文件中，可以通过设置。
微信小程序实现原生导航栏和自定义头部导航栏
花铛
10-28 8002
因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。
小程序 navigation-bar
08-28
小程序 navigation-bar即导航栏，是小程序开发中常用的组件之一。它通常位于小程序的顶部或底部，用于展示小程序的主要导航菜单或者其他功能选项。 小程序 navigation-bar具有以下特点： 1. 布局灵活：小程序 navigation-bar可以根据开发者的需求进行自定义布局，可以包含文字、图标、按钮等元素，方便实现不同的功能导航。 2. 交互友好：小程序 navigation-bar可以与用户进行交互，例如点击某个菜单可以跳转到其他页面，或者展开下拉菜单等。 3. 样式丰富：小程序 navigation-bar的样式可以进行自定义修改，包括字体颜色、背景颜色、边框样式等，可以与小程序的整体风格相匹配。 4. 功能丰富：小程序 navigation-bar可以展示不同的功能选项，例如返回按钮、搜索按钮、分享按钮等，方便用户进行操作。 5. 响应式设计：小程序 navigation-bar可以根据屏幕尺寸进行自适应，保持在不同设备上的显示效果一致。 总之，小程序 navigation-bar在小程序开发中扮演着重要的角色，它可以提供良好的用户导航体验，并且可以灵活适应不同的界面布局和功能需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值