微信小程序自定义tabbar

  最近在写微信小程序(原生),页面tabbar之前使用得是在app.json文件中配置得,但是由于业务需求,点击tabbar按钮之前需要校验用户是否登录了,所以整个tabbar都要重新自定义,好在微信小程序在app.json文件中提供了一个custom得属性,将custom设置为true后,稍作修改就可以使用了;不过在使用过程中,由于自己的粗心 导致遇到了一些问题。

微信官方文档链接https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

一、配置信息
  1、在 app.json 中的 tabBar 项指定 custom 字段
  

  2、所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。(注:usingComponents直接赋值为空对象即可)

 二、新增tabbar文件

  在代码根目录下添加入口文件: (与pages同级的目录下新增custom-tab-bar文件夹,并生成index的文件(直接在微信开发者工具的编辑器里得custom-tab-bar文件夹下右击->新建component->输入index即可))

三、添加tabbar文件代码

  1、custom-tab-bar/index.js文件
  

     

   2、custom-tab-bar/index.wxml文件

      

     3、custom-tab-bar/index.wxss文件

  

   4、custom-tab-bar/index.josn文件

  

四、需要用到tabbar页面需要添加得代码

  js文件(selected:点击第几个 就在对应得页面中配置下 并赋值与其对应得index)

  

    注意:如果在app.json文件中没有添加( "usingComponents":{}),则需要在json文件中新增添加 "usingComponents":{} (千万不能忘记了哦 )

  

 

原文地址:https://www.cnblogs.com/ruishuiweixiang/p/13808438.html