小程序 自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题

本文介绍了如何使用Vant Weapp UI组件库和Mobx进行微信小程序的自定义tabbar实现,包括在app.json开启自定义设置、创建custom-tab-bar文件夹及其内容,以及利用store全局共享数据解决切换时的激活样式问题。同时提供了关于创建store数据共享的参考链接。
摘要由CSDN通过智能技术生成
  • 我用的是 Vant Weapp  UI组件库,
  • 需要用store 全局共享数据 解决tabbar切换激活样式问题

关于如何使用 Mobx,创建store可参考:微信小程序 Mobx实现数据共享(创建store数据共享 + 页面、组件间的数据传递)_Shimeng_1989的博客-CSDN博客

自定义tabbar 步骤: 

  1. 在app.json中,开启自定义tabbar设置
    // 以下内容可参考 小程序文档 -- 自定义tabbar
    //     1.在package.json 文件中找到/新增 tabBar对象
    //     2.添加custom:true 设置
    //     3.开启自定义tabbar后,在根目录创建 custom-tab-bar 文件夹(名字必须叫这个)。
    //     4.在此文件夹下创建 index.wxml、index.js、index.wxss、index.json 四个文件
    //      (可以将鼠标放在文件夹上,右键 -- (选择)创建component(命名index) -- 回车,则会自从创建这四个文件)  
    
    "tabBar": {
            "custom": true, // 开启自定义tabbar配置
            "list": [{ // list不需要删掉 -- 为了向下兼容老版tabbar
           
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值