码迷,mamicode.com
首页 > 微信 > 详细

微信小程序TabBar的使用

时间:2019-11-27 16:25:08      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:idt   跳转   select   复制   div   copy   pre   导航   配置文件   

 一、TabBar使用步骤

          1.创建所需要的界面和所需要的图片:

        技术图片技术图片

       2.配置文件:

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

          技术图片

       
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码

 

       属性的解释

       tabBar  指底部的 导航配置属性

       color  未选择时 底部导航文字的颜色

       selectedColor  选择时 底部导航文字的颜色

       borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

       list   导航配置数组

       selectedIconPath 选中时 图标路径

       iconPath 未选择时 图标路径

       pagePath 页面访问地址

       text  导航图标下方文字

 

 二、不同界面的跳转:

       页面要返回/跳转至tabbar的某一页面,可用:

1 wx.switchTab({  
2       url: ‘../b/b‘  
3     }); 

          注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面

          跳转不带tab的页面还是用redirectTo或者navigateTo 

          故如果post页面没有加入tab选项卡,依然使用redirectTo或者navigateTo进行跳转

         

技术图片
wx.navigateTo({  
     url: ‘../b/b‘  
   });  
wx.redirectTo({  
     url: ‘../b/b‘  
   });  
技术图片

 

 

微信小程序TabBar的使用

标签:idt   跳转   select   复制   div   copy   pre   导航   配置文件   

原文地址:https://www.cnblogs.com/wzb0228/p/11942968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!