下面是关于“微信小程序开发自定义tabBar实战案例(定制消息99+小红心)”的完整攻略。

简介

为了提升小程序的用户体验，我们常会对小程序进行定制化的开发，比如：自定义 tabbar、菜单等等，本文主要讲解如何开发自定义 tabbar，其中包括定制消息 99+ 的小红心，希望对大家进行小程序开发提供一些帮助。

前置知识

在进行本文所述内容的开发前，你需要掌握以下技能：

熟悉微信小程序开发的基本原理和语法；
熟悉小程序组件和 API 的使用；
了解自定义组件的基本用法和编写方法；
熟悉 CSS 样式的基本使用方法。

定义 tabBar

首先，我们需要在 app.json 文件中定义 tabBar，示例如下：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tabbar/mine.png",
        "selectedIconPath": "images/tabbar/mine_selected.png",
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "images/tabbar/message.png",
        "selectedIconPath": "images/tabbar/message_selected.png",
        "badge": "{{tabBarMsgCount}}"
      }
    ]
  },

可以看到，我们在 tabBar 中定义了一个包含三个选项卡的列表，分别是“首页”、“我的”、“消息”。其中，消息选项卡使用了 badge 属性，用于显示未读消息数量，这个变量值我们后面会在页面 JS 中进行注入和赋值。

自定义 tabBar 组件

接下来，我们需要自定义一个 tabBar 组件，以替换默认的 tabBar 组件。具体的代码如下：

tabBar 组件模板代码

<template name="tabBar">
  <view id="custom-tabBar">
    <view wx:for="{{tabList}}" wx:key="{{index}}"' 
        wx:bindtap="changeTabBar" wx:if="{{index != 2}}" class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
    </view>
    <view wx:for="{{tabList}}" wx:key="{{index}}"' wx:if="{{index == 2}}" 
        class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
      <view wx:if="{{tabBarMsgCount>0}}" class="badge">{{tabBarMsgCount<=99?tabBarMsgCount:'99+'}}</view>
    </view>
  </view>
</template>

tabBar 组件 JS 代码

Component({
  properties: {
    tabList: {
      type: Array,
      value: []
    },
    tabIndex: {
      type: Number,
      value: 0
    },
    tabText: {
      type: String,
      value: 'text'
    },
    tabIcon: {
      type: String,
      value: 'iconPath'
    },
    tabBarMsgCount: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeTabBar(e) {
      const {tabindex} = e.currentTarget.dataset
      if (this.data.tabIndex !== tabindex) {
        wx.switchTab({
          url: this.data.tabList[tabindex].pagePath,
          fail: err => {
            console.error(err)
          }
        })
        this.setData({
          tabIndex: tabindex
        })
      }
    }
  }
})

很明显，这份代码定义了一个名为“tabBar”的自定义组件，并在 properties 属性中定义了 tabBar 需要的数据，包括 tabList（列表）、tabIndex（当前选中的选项卡）、tabText（选项卡文字）和 tabIcon（选项卡图标）。其中，tabBarMsgCount 变量用于接收并展示未读消息数量，而 setData 方法将赋值操作放在后面。

页面中引用自定义 tabBar

最后，我们需要在页面中引用自定义的 tabBar 组件。假设我们的页面路径为“pages/home/home”，则在该页面的 wxml 文件中添加如下代码：

<import src="../../components/tabBar/tabBar.wxml"/>
<template is="tabBar" data="{{tabList: tabList, tabIndex: tabIndex, tabText: tabText, tabIcon: tabIcon, tabBarMsgCount: tabBarMsgCount}}"/>

可以看到，我们将自定义 tabBar 组件引入 wxml 文件中，并在模板中引用了几个属性，这些属性定义了 tabBar 组件需要的数据。

到此为止，我们就完成了对自定义 tabBar 组件的开发和页面的引用，未读消息数量变化可以在 JS 中对 tabBarMsgCount 变量进行动态赋值，从而实现自定义 tabBar 的功能。

示例说明

下面分两个示例，对自定义 tabBar 组件的开发过程做进一步说明。

示例 1：自定义图标颜色和样式

在 tabBar 组件的模板和样式中针对 .tab-text 和 .tab-icon 的样式进行定义和修改，实现自定义图标颜色和样式的目的，具体示例代码如下：

<template name="tabBar">
  <view id="custom-tabBar">
    <view wx:for="{{tabList}}" wx:key="{{index}}"' 
        wx:bindtap="changeTabBar" wx:if="{{index != 2}}" class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
    </view>
    <view wx:for="{{tabList}}" wx:key="{{index}}"' wx:if="{{index == 2}}" 
        class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
      <view wx:if="{{tabBarMsgCount>0}}" class="badge">{{tabBarMsgCount<=99?tabBarMsgCount:'99+'}}</view>
    </view>
  </view>
</template>

<style>
  .tab-text {
    font-size: 22rpx;
    color: #666;
  }

  .tab-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .tab-text-selected {
    color: #1296db;
  }

  .tab-icon-selected {
    width: 50rpx;
    height: 50rpx;
  }
</style>

这里我们针对 .tab-text 和 .tab-icon 两个类名进行样式定制，定义了常规样式中的字体颜色、图标尺寸，并给选中后的样式增加了颜色和图标尺寸的修改。

示例 2：自定义未读消息数量提示样式

针对消息选项卡的未读消息数量提示框增加背景和圆角样式，并在 JS 中实现了 tabBarMsgCount 的注入和动态赋值功能，具体示例代码如下：

<template name="tabBar">
  <view id="custom-tabBar">
    <view wx:for="{{tabList}}" wx:key="{{index}}"' 
        wx:bindtap="changeTabBar" wx:if="{{index != 2}}" class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
    </view>
    <view wx:for="{{tabList}}" wx:key="{{index}}"' wx:if="{{index == 2}}" 
        class="tab-item {{tabIndex==index?'selected':''}}">
      <image class='tab-icon {{tabIndex==index?"tab-icon-selected":""}}' 
          src="{{item[tabIcon]}}" mode="aspectFill"></image>
      <text class='tab-text {{tabIndex==index?"tab-text-selected":""}}'>{{item[tabText]}}</text>
      <view wx:if="{{tabBarMsgCount>0}}" class="badge">{{tabBarMsgCount<=99?tabBarMsgCount:'99+'}}</view>
    </view>
  </view>
</template>

<style>
  .badge {
    display: inline-block;
    border-radius: 8rpx;
    background-color: #f00;
    color: #fff;
    font-size: 22rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    height: 32rpx;
    position: absolute;
    top: 10rpx;
    right: 60rpx;
  }
</style>

<js>
Page({
  data: {
    tabBarMsgCount: 0
  },
  onLoad: function () {
    setInterval(() => {
      this.setData({
        'tabBarMsgCount': Math.floor(Math.random()*100)
      })
    }, 1000)
  }
})
</js>

这里我们在样式表中针对 .badge 类名进行规定，定义了未读消息数量提示框的样式，包括背景颜色、边框圆角、字体颜色、字体大小和与文本之间的边距。在 JS 中，我们对 tabBarMsgCount 进行了注入并赋初始值 0，然后使用 Math.random() 来模拟实际的消息数量变化，实现消息数量的动态更新。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：微信小程序开发自定义tabBar实战案例(定制消息99+小红心) - Python技术站

微信小程序开发自定义tabBar实战案例(定制消息99+小红心)

简介