微信小程序动态导航栏（uniapp + vant）

已于 2023-12-20 10:48:09 修改
阅读量1.4k 收藏 6
点赞数 11
CC 4.0 BY-SA版权
分类专栏： uniapp / 原生微信小程序 文章标签： 微信小程序 uni-app 小程序
于 2023-12-19 17:24:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wkh___/article/details/135089403
本文介绍如何在uniapp中整合vant UI框架，特别是利用van-tabbar组件来创建微信小程序的动态导航栏。首先从GitHub下载vant的小程序版本并放入uniapp的wxcomponents目录，然后全局引入van-tabbar组件，并在pages.json中配置。接着在自定义组件tab-bar.vue中整合van-tabbar，同时在App.vue设置全局变量以标记当前选中的导航栏。最后在pages/index.vue中使用该自定义组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


本文使用到vant的van-tabbar组件来实现

一、uniapp整合vant ui

vant小程序版本：https://vant-contrib.gitee.io/vant-weapp/#/home
注：vant并没有uniapp的版本，所以此处是引入小程序版本的ui

1. 下载vant编译后代码
https://github.com/youzan/vant-weapp/tree/dev/dist
2. 在uniapp根目录创建文件夹：wxcomponents
将vant的dist目录重命名后复制至此处，目录结构如下图

3. 全局引入van-tabbar组件
pages.json


                

                
                
        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
微信小程序 - 详细实现底部菜单tabbar显示消息数量或数值变化展示等场景，实时监听globalData全局变量，微信小程序监听App中的globalData全局数据监听，用作公共数据展示（详细代码

				
			

			

				

					高级前端工程师
				

				

					08-08
					
					4484
					
				

			

		

		

			
				
微信小程序，vue2，vue3，Tabbar，导航菜单，底部菜单，底部tabbar需要实时更新一个数值，角标，小程序如何监听globalData全局变量，小程序自定义底部菜单做消息通知实时监听变化，原生小程序跨页面动态改变状态，动态改变app.js全局定义的数据globalData，并实现实时监听的方法，组件，设置一个公共变量，用于整个应用的消息通知角标数字，watch监听，熄屏了也能监听到，app.js中定义watch函数，通知其它页面界面显示改变，需要在任何页面都显示，怎么一直都监测它的数值变化呢？小程

			
		

	



                

            
              



	

		

			

				
					
【前端 Uniapp】使用Vant打造Uniapp项目（避坑版）

				
			

			

				

					m0_74824877的博客
				

				

					12-11
					
					6069
					
				

			

		

		

			
				
Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。

			
		

	



              


  
              

                


	

		

			

				
					
小程序动态设置导航栏

				
			

			

				

					qq_36437172的博客
				

				

					10-11
					
					1160
					
				

			

		

		

			
				
通过点击页面不同的分类，进入页面时动态设置标题。小程序官方文档


onLoad: function (options) {
    // 动态设置导航栏
    wx.setNavigationBarTitle({
      title: options.title
    })
  },

...

			
		

	





	

		

			

				
					
uniapp 根据不同角色实现动态底部TabBar导航栏

				
			

			

				

					qq_32073593的博客
				

				

					02-19
					
					1万+
					
				

			

		

		

			
				
根据用户角色信息灵活地调整TabBar的属性，从而实现个性化的TabBar界面展示，以满足不同用户群体的特定需求。

			
		

	



		

			
		



	

		

			

				
					
微信小程序菜单栏开发深度解析：种类+优缺点+实例代码

					
最新发布

				
			

			

				

					weixin_45917851的博客
				

				

					06-11
					
					1075
					
				

			

		

		

			
				
适用场景：工具类小程序（截图/录音按钮等）实现原理+ 事件绑定。

			
		

	





	

		

			

				
					
闲着无聊，撸个微信导航栏的动画吧！

				
			

			

				

					2401_84149635的博客
				

				

					05-08
					
					911
					
				

			

		

		

			
				
微信自发布以来，底部导航栏的动画一直让开发者津津乐道，而且伴随着版本更新，底部导航栏的动画也一直在改进。我最近在闲暇之余，看了下微信的底部导航栏动画，于是思考了下这个动画的原理，感觉非常有意思，于是写下这篇文章。下图就是我实现的效果，大家可以对比下微信的效果，几乎可以以假乱真。/   动画过程   /=======================================================================关于这个动画的过程，我刚开始了是瞅了老半天了，因为如果我们不了解动画

			
		

	





	

		

			

				
					
微信小程序自定义导航栏组件

				
			

			

				

					weixin_48372590的博客
				

				

					11-17
					
					1091
					
				

			

		

		

			
				
微信小程序自定义导航栏组件

			
		

	





	

		

			

				
					
微信小程序中的动态设置导航条

				
			

			

				

					HaiJing1995的博客
				

				

					04-08
					
					5707
					
				

			

		

		

			
				
微信小程序中动态设置导航条
我们知道微信小程序中设置导航条可以直接在json文件中设置  "navigationBarTitleText"  = "String"  就可以了
但是我们有时可能需要根据不同的情况动态设置导航条。


微信小程序给我们提供了一个方法 
setNavigationBarTitle({
    title: "string", 
    success: fu

			
		

	





	

		

			

				
					
微信小程序导航栏组件库：GitCode上的`wechat-miniprogram-navigation-bar`

				
			

			

				

					gitblog_00072的博客
				

				

					03-30
					
					314
					
				

			

		

		

			
				
微信小程序导航栏组件库：GitCode上的wechat-miniprogram-navigation-bar
在微信小程序开发中，设计和实现一套美观、易用且功能齐全的导航栏是至关重要的。为了帮助开发者节省时间和精力，专注于业务逻辑， 上的一个优秀开源项目 `` 提供了一套完整的导航栏解决方案。
项目简介
wechat-miniprogram-navigation-bar 是一个专门为微信小程序打造...

			
		

	





	

		

			

				
					
uniapp+vant weapp实现课程表小程序_课程表功能的实现

				
			

			

				

					Kätzchen-408的博客
				

				

					06-01
					
					2290
					
				

			

		

		

			
				
课程表功能的实现思路1.节数与天数和grid内单选框索引的转换2.单选框样式的魔改温馨提示:尽量用原生源码
思路
课程表的实现,我想了很久,在没有现成组件库的情况下实现,我主要是用了vant weapp的宫格和单选框来实现主要的难点有以下两个方面:
1.节数与天数和grid内单选框索引的转换
返回值给我一个包含课程节数和天数的对象数组,我把它转换成一个包含unit(5节课*7天的对应的数字来定位)的对象数组
2.单选框样式的魔改
单选框直接使用radio的插槽来贴图来适应样式需求
<van-radio

			
		

	





	

		

			

				
					
uniapp或微信小程序一些问题解决

				
			

			

				

					lxt135744的博客
				

				

					05-24
					
					618
					
				

			

		

		

			
				
参考博主：微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app，顺便自己写个小程序。左上角放了个button，可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要这么写。。。_微信小程序button去掉边框。

			
		

	





	

		

			

				
					
uniapp微信小程序侧边导航栏

				
			

			

				

					02-09
				

			

		

		

			
				
为了实现在 UniApp 中集成微信小程序的侧边导航栏，可以考虑使用 Vant Weapp 组件库中的抽屉组件 (Drawer)，这有助于快速搭建具有侧边导航功能的应用界面。  安装 Vant Weapp：  ```bash npm i @vant/weapp -S --...

			
		

	





	

		

			

				
					
小程序动态更改底部导航栏

				
			

			

				

					02-02
				

			

		

		

			
				
动态更改tabbar，两种方式，每一种都有不一样的展示
动态更改tabbar

			
		

	





	

		

			

				
					
微信小程序实现原生导航栏和自定义头部导航栏

					
热门推荐

				
			

			

				

					花铛
				

				

					10-28
					
					1万+
					
				

			

		

		

			
				
因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。

			
		

	





	

		

			

				
					
小程序动态设置导航栏和状态栏

				
			

			

				

					lxs19930928的博客
				

				

					01-05
					
					1725
					
				

			

		

		

			
				
设置导航栏为自定义


"navigationStyle": "custom"



{

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  },

}


			
		

	





	

		

			

				
					
uniapp使用vant-weapp（微信小程序）

				
			

			

				

					weixin_68882321的博客
				

				

					04-27
					
					1013
					
				

			

		

		

			
				
3. 在项目跟目录创建 wxcomponents 文件夹目录，把复制的 dist 文件夹直接放里面就行。4.在 uniapp 官网里 查找框架里的 easycom 组件模式。2. 解压下载的文件包，在复制 dist 文件夹里的文件。（可以改dist的文件名，叫vant）1. 打开GitHub下载文件包。5.从官网里复制，修改路径。

			
		

	





	

		

			

				
					
uniapp使用Vant ui

				
			

			

				

					weixin_42878337的博客
				

				

					04-11
					
					7854
					
				

			

		

		

			
				
网上百度uniapp使用vant时，很多答案都是在根路径下创建文件夹，而且都是基于小程序环境的。创建完成后，加载vant依赖，这里我使用的是vue2，所以加载的事vant2。可以看到vant组件中的按钮已经显示出来了，样式也是可以的。到这里就结束了，可以随意在里面使用你想要的组件啦。vant组件的样式还是可以的，但是针对于uniapp，个人觉得还是使用针对于uniapp开发的框架会好用一些。但是在uniapp中这样是不可以的，本人亲测，勿掉坑了。到这里已经引入成功了，在vue框架中可以直接在这里引入样式。

			
		

	





	

		

			

				
					
uniapp微信小程序导航栏切换动画

				
			

			

				

					m0_55258023的博客
				

				

					03-01
					
					1089
					
				

			

		

		

			
				
uniapp微信小程序导航栏切换动画

			
		

	





	

		

			

				
					
[保姆级教程]在uniapp中使用vant框架

				
			

			

				

					肥晨开发的学习之路
				

				

					06-21
					
					1万+
					
				

			

		

		

			
				
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
954L

			
帮帮孩子把~  

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值