专栏首页算法与编程之美微信小程序|底部标签导航

微信小程序|底部标签导航

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

底部标签导航可以说是任何一个APP的标配,那么该如何设置底部标签导航呢?

解决方案

制作标签导航首先需要我们自己将找到的图片保存进目录文件夹里,小程序界面会自动更新,然后再在App.json配置文件。

在App.json:

{

  "pages":  [

     "pages/movie/movie",

     "pages/cinema/cinema",

     "pages/find/find",

     "pages/me/me"

   ],

 

  "tabBar":  {

     "selectedColor": "#D53E37",

     "backgroundColor": "#f5f5f5",

     "borderStyle": "white",

     "list": [

       {

         "pagePath": "pages/movie/movie",

         "text": "电影",

         "iconPath": "pages/images/video.png",

         "selectedIconPath": "pages/images/video (1).png"

       },

       {

         "pagePath": "pages/cinema/cinema",

         "text": "影院",

         "iconPath": "pages/images/search.png",

         "selectedIconPath": "pages/images/search (1).png"

       },

       {

         "pagePath": "pages/find/find",

         "text": "发现",

         "iconPath": "pages/images/add_friend.png",

         "selectedIconPath": "pages/images/add_friend  (1).png"

       },

       {

         "pagePath": "pages/me/me",

         "text": "我的",

         "iconPath": "pages/images/star.png",

         "selectedIconPath": "pages/images/star(1).png"

       }

     ]

   },

  "sitemapLocation":  "sitemap48.json"

}

 

效果图:

图3.1底部导航标签

代码解释:

tabBar是一个对象,可以配置标签导航文字的默认和选中颜色,导航背景色、上边框色,上边框色有black和white两种。

list是一个数组,可以存放标签导航。list里的每个对象分别对应一个标签导航。

结语

App.json文件可以配置页面路径、窗口表现、标签导航、网络超时和debug模式,而制作标签导航需要在App.json里配置tabBar属性来设置导航文字和背景等颜色,以及添加list数组来配置标签导航的路径、名称以及图标。要注意虽然pages也是数组,但添加的却是页面路径。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:赵微

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML|对简单表格网页的学习

    我们经常看到关于表格的网页,例如一些报名表,统计表之类的,里面有很多的信息,图片,以及一些超链接。如何做一个美观好看五彩的表格网页,以及在表格中插上图片及超链接...

    算法与编程之美
  • 微信小程序|图片轮播

    Swiper滑块视图容器用来在指定区域内切换内容的显示,可以用于制作图片轮播效果。

    算法与编程之美
  • 微信小程序|两种基本配置

    轮播图能够让我们的微信小程序显得更加美观,微信小程序中总是需要很多点击页面的跳转,那我们运用什么样的代码才能够实现呢?

    算法与编程之美
  • 小程序:下拉刷新的简单方法"enablePullDownRefresh": true

    在小程序里面加上一个下拉刷新的原因是为了优化用户的体验,有时候会遇到这样的一种情况,用户的网络比较慢,那么该出现的内容就出现的很慢,如果有下拉刷新的功能,就会给...

    祈澈菇凉
  • 记录一些微信小程序里面遇到的坑

    为啥说他坑呢,因为ide里是会跟着变的,而真机里不会(可能是新版微信的缘故,这我也不太确定,毕竟升完级懒得降了)。解决方案很简单,在需要用到修改后的app的地方...

    坑吭吭
  • POJ 2771 Guardian of Decency

    Description Frank N. Stein is a very conservative high-school teacher. He wants...

    attack
  • 安装包立减1M--微信Android资源混淆打包工具

    上一篇文章我们讲述了Android减少安装包体积的一些tips,本文主要对前文提到的资源混淆做一个简单的分析。微信中的资源混淆工具主要为了混淆资源ID长度(例如...

    微信终端开发团队
  • 腾讯云专家工程师廖龙:CDN边缘智能助力5G

    10月19日,云+社区开发者大会(北京站)圆满落幕。本次开发者大会的主题为“5G探索:核心技术与挑战”,邀请了腾讯内部及业内行业大咖就5G场景下应该如何面对新业...

    TVP官方团队
  • 数据库事务理解

    事物 本章讲述了三种常见的数据操作语句Insert /Update / Delete的基本语法,也提到了Oracle9i新的数据操作语句 – Merge的作用和...

    程序源代码
  • RPC理论以及Dubbo的使用介绍

    RPC 的主要功能目标是让构建分布式应用更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性。

    小勇DW3

扫码关注云+社区

领取腾讯云代金券