小程序实践（一）：主页tab选项实现

番茄西红柿发布于2019-04-23 13:34 / 643人阅读

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

官方文档

效果图：

实现底部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"
      }
    ]
  }
}

app.json

四、多带带页面的配置

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

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

1、设置多带带页面的页面标题，这个需求是在json文件中配置实现的。

　　　主需要在多带带页面路径下的json文件中添加属性：

　　　　官方文档

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

　　页面内容搭建（ui绘制代码）是在多带带页面路径下的wxml文件中配置实现的。

　　　　官方文档

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

小程序实践（一）：主页tab选项实现

小程序实践（二）：swiper组件实现轮播图效果

小程序实践（三）：九宫格实现及item跳转

小程序实践（四）：动态控制组件的显示/隐藏

小程序实践（五）：for循环绑定item的点击事件

小程序实践（六）：view内部组件排版

小程序实践（七）：页面间传值

小程序实践（八）：验证码倒计时功能

小程序实践（九）：返回到上一个界面并传值回去

小程序实践（十）：textarea实现简单的编辑文本界面

小程序实践（十一）：showModal的使用

小程序实践（十二）：七牛云上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2059.html

小程序实践（二）：swiper组件实现轮播图效果

摘要：组件类似于中的，实现类似轮播图的效果，相对于的实现起来更加方便，快捷。swiper组件类似于Android中的ViewPager，实现类似轮播图的效果，相对于Android的Viewpager,swiper实现起来更加方便，快捷。效果图：首先看下swiper支持的属性： --------------------------------------------------------...

番茄西红柿 2019-04-23 13:34 评论0 收藏0
小程序实践（三）：九宫格实现及item跳转

摘要：效果图实现效果图红色线包含部分的九宫格效果，并附带点击时间。效果图：实现效果图红色线包含部分的九宫格效果，并附带item点击时间。 ------------------------------------------------------------------------------------------------------ 具体实现： 1、首先添加图片资源文件　在...

番茄西红柿 2019-04-23 13:34 评论0 收藏0
一次完整的react hooks实践

摘要：本次需求其实就两个逻辑输入筛选项。当发生改变时，重新渲染页面首次进入页面时，无任何筛选项。关于的一些，官方也有很棒的文档写在后面本文通过工作中的一个小需求，完成了一次的实践，不过上述代码依然有很多需要优化的地方。写在前面 showImg(https://segmentfault.com/img/bVbpBgw?w=1000&h=563); 本文首发于公众号：符合预期的CoyPan R...

kuangcaibao 2019-08-26 13:35 评论0 收藏0
微信小程序音乐播放器,leancloud后端支持,体验小程序数据绑定,Promise较为优雅解决回调

摘要：初窥添加音乐到收藏最近列表歌词滚动从一个开始微信开发者工具生成目录如下主页日志页面工具大体为每一个即是一个页面文件，每个页面有一个文件规定描述页面的这四个文件必须具有相同的路径与文件名。 showImg(https://segmentfault.com/img/remote/1460000009405866);showImg(https://segmentfault.com/img/r...

go4it 2019-08-20 16:31 评论0 收藏0