微信小程序自定义tabBar

最新推荐文章于 2024-07-25 08:15:00 发布
最新推荐文章于 2024-07-25 08:15:00 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 微信小程序 前端 文章标签： 微信小程序 小程序 自定义tabBar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34569497/article/details/130786223
版权

1.app.json中tabBar里设置 "custom":true

设置好后就可使用自定义tabBar。

注意：list中的页面必须保存，且必须和自定义的tabBar页面数据一致

"tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },

2.创建tabBar代码文件

在根目录下创建custom-tab-bar文件夹，并创建名为index的component组件。

注意以下三点，否则自定义tabBar不会生效：

  • 必须是根目录下
  • 且文件夹必须名为custom-tab-bar
  • 文件夹下的component组件名必须为index

3.npm下载vant weapp包，并在app.json中引入以下组件

  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }

 4.自定义tabBar文件 index.wxml文件中，使用<van-tabBar>生成tabBar结构

image 标签中，slot中icon代表非选中图标，icon-active代表选中图标

<van-tabbar active="{{ active }}" bind:change="onChange"
active-color="#07c160">
  <van-tabbar-item info="{{item.info>0?item.info:''}}" wx:for="{{list}}" wx:key="name">
    <image
      slot="icon"
      src="{{ item.icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ item.icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.name}}
  </van-tabbar-item>
</van-tabbar>

5.在index.ts中，创建tabBar页面数据

info表示徽标；pagePath表示tab对象页面路径；icon表示选中和非选中图标存放路径

data: {
    // active: 0,
    // list的pagePath: "/pages/home/home"必须再app.json中有对应数据
    list:[{
      info:3,
      name:"首页",
      pagePath: "/pages/home/home",
      icon: {
        normal: '/images/tabs/home.png',
        active: '/images/tabs/home-active.png',
      },
    },{
      name:"消息",
      pagePath: "/pages/message/message",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    },{
      name:"联系我们",
      pagePath: "/pages/contact/contact",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    }
  ],
  },

6.渲染徽标

通过info属性控制徽标显示，为 '' 时自动不显示，info="{{item.info>0?item.info:''}}"表示按需加载，此处具体情况需要具体分析

<van-tabbar-item info="{{item.info>0?item.info:''}}" wx:for="{{list}}" wx:key="name">

7.如果徽标显示溢出tabBar容器

在index.scss中设置以下： 将margin-bottom设置为0

.van-tabbar-item{
  // scss中变量使用$开头
  $tabbar-item-margin-bottom: 0
}

注意：index.ts中需要设置以下才会生效

  options:{
    "styleIsolation":"shared"
  },

 

8.使用mobx 将徽标的值设置为 动态可变

测试案例：将numA,numB,sum放在store中，numA或者numB改变时，sum计算属性对应改变，然后将sum值和info做同步。

store.ts:

import { observable, action} from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2,
  active: 0,

  get sum(){
    return this.numA + this.numB;
  },
  updateActive:action(function(this: any, active:number){
    this.active = active;
  }),
  updateNumA: action(function(this: any, step:number){
    this.numA += step;
  }),
  updateNumB: action(function(this: any, step:number){
    this.numB += step;
  })

});

home页面展示对应值和两个改变值按钮，改变后，同步index中的徽标属性info

home.wxml:

<view>
<view>
  {{numA}} + {{numB}}  = {{sum}}
</view>
  <van-button type="primary" bindtap="handleNumA" data-step="1"> numA + 1 </van-button>
  <van-button type="info" bindtap="handleNumA" data-step="-1"> numA - 1 </van-button>
</view>
// pages/home/home.ts
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  handleNumA(this:any, e: any){
    this.updateNumA(e.target.dataset.step-0);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(this: any) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNumA']
    });

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload(this: any) {
    this.storeBindings.destroyStoreBindings();
  },

})

 然后再index.ts中监听sum变化，并同步info值

observers:{
    'sum':function(val){
      this.setData({ 'list[0].info': val });
    }
  },

9.实现tabBar页面可切换

<van-tabBar>标签中设置onChange事件通过e.detail回去当前tabBar索引，并调用wx.switchTab()切换到对应页面

<van-tabbar active="{{ active }}" bind:change="onChange"
active-color="#07c160">
  methods: {
    onChange(this:any,e: any){
      // 切换tab页面
      // 将active保存到store中，否则点中项会错乱
      // this.setData({ active: e.detail });
      this.updateActive(e.detail);
      wx.switchTab( {url: this.data.list[e.detail].pagePath} );
    }
  }
})

 11.选中项索引active直接赋值e.detail会混乱，将索引存到store中

store.ts:

export const store = observable({
...
  active: 0,

...
  updateActive:action(function(this: any, active:number){
    this.active = active;
  }),
})

index.ts中再调用updateActive()方法改变active的值 

  methods: {
    onChange(this:any,e: any){
      // 将active保存到store中，否则点中项会错乱
      // this.setData({ active: e.detail });
      this.updateActive(e.detail);
      wx.switchTab( {url: this.data.list[e.detail].pagePath} );
    }
  }
})

12.改变选中项文字颜色

 <van-tabbar>中设置active-color="#07c160"为想要的颜色即可

13.注意：app.json中list中的页面及路径等必须和自定义tabBar自定义组件中的数据相同

data: {
    // active: 0,
    // list的pagePath: "/pages/home/home"必须再app.json中有对应数据
    list:[{
      info:3,
      name:"首页",
      pagePath: "/pages/home/home",
      icon: {
        normal: '/images/tabs/home.png',
        active: '/images/tabs/home-active.png',
      },
    },{
      name:"消息",
      pagePath: "/pages/message/message",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    },{
      name:"联系我们",
      pagePath: "/pages/contact/contact",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    }
  ],
  },

14.完整代码

代码结构：

 

app.json

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "subpackages": [{
    "root": "packageA",
    "pages": ["pages/basic/basic","pages/logs/logs"]
  },{
    "root": "packageB",
    "pages": ["pages/test1/test1","pages/test2/test2"],
    "independent": true
  }
],
"preloadRule": {
  "packageA/pages/basic/basic":{
    "network": "wifi",
    "packages": ["packageA"]
  }
},
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "store-test": "/components/store-test/store-test",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

store.ts:

import { observable, action} from 'mobx-miniprogram'

export const store = observable({
  numA: 1,
  numB: 2,
  active: 0,

  get sum(){
    return this.numA + this.numB;
  },
  updateActive:action(function(this: any, active:number){
    this.active = active;
  }),
  updateNumA: action(function(this: any, step:number){
    this.numA += step;
  }),
  updateNumB: action(function(this: any, step:number){
    this.numB += step;
  })

});

home.wxml:

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view>
<view>
  {{numA}} + {{numB}}  = {{sum}}
</view>
  <van-button type="primary" bindtap="handleNumA" data-step="1"> numA + 1 </van-button>
  <van-button type="info" bindtap="handleNumA" data-step="-1"> numA - 1 </van-button>
</view>

home.ts:

// pages/home/home.ts
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  handleNumA(this:any, e: any){
    this.updateNumA(e.target.dataset.step-0);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(this: any) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNumA']
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload(this: any) {
    this.storeBindings.destroyStoreBindings();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

index.wxml:

<van-tabbar active="{{ active }}" bind:change="onChange"
active-color="#07c160">
  <van-tabbar-item info="{{item.info>0?item.info:''}}" wx:for="{{list}}" wx:key="name">
    <image
      slot="icon"
      src="{{ item.icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ item.icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.name}}
  </van-tabbar-item>
</van-tabbar>

index.ts:

import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'

ComponentWithStore({
  options:{
    "styleIsolation":"shared"
  },
  observers:{
    'sum':function(val){
      this.setData({ 'list[0].info': val });
    }
  },
  storeBindings:{
    store,
    // 只需要监听sum所以只引入sum
    fields:['sum','active'],
    actions:['updateActive']
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    // active: 0,
    // list的pagePath: "/pages/home/home"必须再app.json中有对应数据
    list:[{
      info:3,
      name:"首页",
      pagePath: "/pages/home/home",
      icon: {
        normal: '/images/tabs/home.png',
        active: '/images/tabs/home-active.png',
      },
    },{
      name:"消息",
      pagePath: "/pages/message/message",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    },{
      name:"联系我们",
      pagePath: "/pages/contact/contact",
      icon: {
        normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
        active: 'https://img.yzcdn.cn/vant/user-active.png',
      },
    }
  ],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(this:any,e: any){
      // 切换tab页面
      // 将active保存到store中，否则点中项会错乱
      // this.setData({ active: e.detail });
      this.updateActive(e.detail);
      wx.switchTab( {url: this.data.list[e.detail].pagePath} );
    }
  }
})

index.scss:

/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  // scss中变量使用$开头
  $tabbar-item-margin-bottom: 0
}

15.效果实现 

 

Jyann~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序——自定义底部tabBar
每天都要努力学习哦~~
05-10 1万+
》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要。由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。此时，通过点击切换页面，就可以实现。
微信小程序自定义tabbar
crazyXB的博客
07-04 705
微信小程序自定义tabbar的使用方法，以及动态控制自定义tabbar的显隐状态。
微信小程序开发---自定义底部tabBar
weixin_73318685的博客
06-22 1636
实现步骤：1.在app.json中的tabBar项指定custom字段值为 true，同时其余tabBar相关配置也补充完整。 2.在代码根目录下添加入口文件添加 tabBar 代码文件，文件名必须为 custom-tab-bar，必须在根目录处添加（与page文件同级）。3.编写tabBar代码。4. 实现tabBar选中态
【微信小程序】自定义tabbar
韩旭不会敲代码吧的博客
03-17 1368
自定义tabbar
微信小程序自定义tabBar简易实现
1
12-01 1337
index.wxml
微信小程序自定义 TabBar，我会了！
最新发布
weixin_44692308的博客
07-25 1828
实现了自定义 TabBar，并且能够根据需要控制其显示与隐藏。
微信小程序自定义tabBar,中间圆形凸起
05-31
在微信小程序开发中，自定义`tabBar`是提升用户界面体验的重要环节。原生的微信小程序`tabBar`虽然提供了基本的样式和功能，但往往无法满足开发者对个性化设计的需求。本文将深入探讨如何实现一个中间圆形凸起的...
微信小程序自定义tabbar中间突起样式
04-20
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的本地服务和交互体验。在微信小程序中，`tabbar` 是一个基础且重要的组件，它通常位于页面底部，用于展示应用的主要功能...
微信小程序自定义tabbar源码
03-22
通过以上步骤，你就能实现一个功能完备且可定制的微信小程序自定义tabbar。这不仅提升了用户体验，也能更好地展示应用的品牌特色。在实际开发过程中，需要注意代码的可维护性和复用性，确保组件的灵活性。
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
微信小程序 自定义tabBar
tengyuxin的博客
08-01 7760
一、官方文档根据官方的案例，做了自己的案例测试，效果图如下二、在app.json里面添加tabBar配置配置完成后，不会出现tabBar，需要在custom-tab-bar这个微信小程序已经定义的文件夹，里面添加对应的路径配置。...
五种 自定义tabbar导航demo
shenle_v的博客
05-08 730
五种自定义tabbar导航dome
微信小程序学习笔记——页面tabar（点击变色）
qq_69891466的博客
08-02 1205
有时候在写微信小程序的时候可能想要达到上图中的效果，在页面上方有一个tabar，点击每个图标相应的图标就会被选中并显示对应的界面，这个主要通过wx:for wx:if 来实现。
微信小程序原生实现自定义tabBar
weixin_45600052的博客
10-24 480
自定义tabBar 写法和普通切换tab的写法基本一致，自定义tabBar 是写成了组件的形式。4. 在每个pagePath的文件的index.js的onShow插入以下代码。1. 需要在app.json中的tabBar的custom设置成true；后续自定义tabBar遇到的问题及解决还会更新文档！3. 在custom-tab-bar文件夹里面的文件编写代码；2. 在src下的创建custom-tab-bar文件夹(
自定义tabBar
qq_44173499的博客
02-26 1279
第一步：在page.json修改tabbar的配置 只保留页面路径， Markup "tabBar": { "color": "#7A7E83", "selectedColor": "#0A50DF", "borderStyle": "white", "backgroundColor": "red", "height":"0px", "custom": true, "list": [{ "pagePath": "pages/
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
分享互联网的有趣知识~
11-09 8663
微信小程序自定义导航栏机型适配--底部Tabbar--view高度
微信小程序自定义TabBar,点击一次url跳转正确，icon没有选中状态
weixin_62472589的博客
09-04 488
解决微信小程序自定义导航栏 点击icon，icon没有高亮的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值