小程序实践(一):主页tab选项实现

官方文档

效果图:

实现底部Tab选项,只需要在项目根目录下的app.json下修改

如图:

 ------------------------------------------------------------------------------------------------------

 先介绍一下app.json文件

默认有两个代码块:
1、pages
这里注册了当前小程序的所有页面路径
2、window
这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档,本文章不做介绍

  我们看下app.json提供的另一个配置项:tabBar

   tabBar提供一些公有的属性对tab配置:

  而针对每一个单独的tab 也有一些属性进行配置:

     官方示意图:

 ------------------------------------------------------------------------------------------------------

 具体实现底部Tab功能:

 设定一个需求,假设当前我们有两个tab,一个'主页',一个'我的' , 未选中灰黑色,选择红色。

 一、在pages目录下创建两个目录,并创建想要的js、json、wxml、wxss相关文件

       名字随意,这里举例:home目录(主页Tab相关),mine目录(我的Tab相关)

二、在根目录下新建一个目录,取名images(随意取),用于存放图片,这里tab需要使用

  1、在阿里素材库下载几个,注意tab图片需要下载点击和未点击两种状态下的图片。

       2、讲图片资源复制到自己建的用于存图片的目录下

三、app.json文件配置

      1、在pages属性中配置项目所有的页面路径,我们这个例子就两个,home,mine

"pages":[
    "pages/home/home",
    "pages/mine/mine"
  ]

    2、添加tabBar 属性 , 定义一些状态

            根据文章前面部分讲解,进行一些必要属性的配置

"tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }
{
  "pages":[
    "pages/home/home",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  
  "tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }
}

四、单独页面的配置

一个页面包含js、hson、wxml、wxss等相关文件。

这里不再多具体介绍,只添加一个小需求,点击tab切换相关页面,该页面标题要和tab一致,页面内容也和tab一致,用于说明tab效果正确实现。

      1、设置单独页面的页面标题,这个需求是在json文件中配置实现的。

   主需要在单独页面路径下的json文件中添加属性:

官方文档

     2、在页面中显示与tab一致的文字

     页面内容搭建(ui绘制代码)是在单独页面路径下的wxml文件中配置实现的。

官方文档

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

jQuery Tools Scrollable使用的限制

在现在很多项目中,都会使用到jQuery Tools中scrollable。特别对于显示Photo Gallery,当然目前国内国外都有第三方非常优秀的的类似j...

20850
来自专栏朱丽琪的专栏

Selenium 原理探秘

Selenium 作为目前主流的 web 自动化工具,使用非常广泛,本文介绍 selenium 的发展历程以及对应的工作原理。

1.1K10
来自专栏技术墨客

Next.js入门教程 原

参考代码:https://github.com/chkui/nextjs-getting-started 。

1.2K20
来自专栏Youngxj

SweetAlert-js超酷消息警告框插件

25230
来自专栏前端杂谈

移动端引入的字体文件过大处理方法

1.1K220
来自专栏码生

LaunchScreen.storyboard 启动页设置图片不显示 启动页白屏

启动页设置方式有两种 一是通过LaunchScreen.storyboard设置 二是通过 Assets.xcassets 增加 iOS Launch Im...

1.3K30
来自专栏移动开发面面观

React Native 一个开始

11520
来自专栏ionic3+

【技巧】ionic3的小彩蛋

ionic里面有不少彩蛋——就是官网没有说明,但是可以用的,因为一段时间没用ionic做项目,所以一时想不起来,先列几个:

9450
来自专栏十月梦想

小程序页面跳转

使用组件  <navigator> 示例:  <navigator url='../test/test'>点击跳转</navigator>

13230
来自专栏云计算教程系列

如何在Apache上部署多个Wordpress站点

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

44850

扫码关注云+社区

领取腾讯云代金券