微信小程序自定義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":{} (千萬不能忘記了哦 )

 

 

 

  

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM