微信小程序自定义tabbar

本文主要是介绍微信小程序自定义tabbar，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序自定义tabbar

官方 custom-tab-bar

规则的tabbar（使用 cover-view等标签来覆盖原生的tabbar，但只能是规则的tabbar）

app.json中配置 tabbar

"tabBar": {
    "custom": true,
    "color": "#fff",
    "selectedColor": "#6777FD",
    "borderStyle": "black",
    "backgroundColor": "#30323B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/images/index.png",
        "selectedIconPath": "assets/images/indexChecked.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "assets/images/self.png",
        "selectedIconPath": "assets/images/selfChecked.png"
      }
    ]
  },

在项目根目录新建目录：custom-tab-bar，并以组件形式新增文件

custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab">
    <cover-image src="{{selected === item.pagePath ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === item.pagePath ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

custom-tab-bar/index.js

Component({
  data: {
    selected: '/pages/index/index',
    color: "#fff",
    selectedColor: "#6777FD",
    list: [
      {
        "pagePath": "/pages/index/index",
        "text": "首页",
        "iconPath": "/assets/images/index.png",
        "selectedIconPath": "/assets/images/indexChecked.png"
      },
      {
        "pagePath": "/pages/my/index",
        "text": "我的",
        "iconPath": "/assets/images/self.png",
        "selectedIconPath": "/assets/images/selfChecked.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  }
})

custom-tab-bar/index.json

{
  "component": true
}

custom-tab-bar/index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #30323B;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom); /* env css函数 取css自定义属性变量或者设置 */
  /*padding-bottom:calc(16rpx + constant(safe-area-inset-bottom));*/
  /*padding-bottom:calc(16rpx + env(safe-area-inset-bottom));*/
}

.tab-bar-border {
  background-color: rgba(255, 255, 255, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

tab页面：index页面、my页面中使用

page的json中开启组件

"usingComponents":{}

js中使用

 // index 自定义tabbar
if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
  this.getTabBar().setData({
    selected: '/pages/index/index'
  })
}
 // my 自定义tabbar
if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
  this.getTabBar().setData({
    selected: '/pages/my/index'
  })
}

不规则的tabbar，使用view标签而非cover-view（cover-view标签，不规则的那部分会看不见）

app.json中配置 tabbar

  "tabBar": {
    "custom": true,
    "color": "#fff",
    "selectedColor": "#6777FD",
    "borderStyle": "black",
    "backgroundColor": "#30323B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/images/index.png",
        "selectedIconPath": "assets/images/indexChecked.png"
      },
      {
        "pagePath": "pages/search/index",
        "iconPath": "assets/images/search.png",
        "text": "",
        "selectedIconPath": "assets/images/search.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "assets/images/self.png",
        "selectedIconPath": "assets/images/selfChecked.png"
      }
    ]
  },

在项目根目录新建目录：custom-tab-bar，并以组件形式新增文件

custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tabBar">
  <view class="cont">
    <block wx:for="{{list}}" wx:key="index" >
      <view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}}">
        <image src="{{selected === index  ? item.selectedIconPath : item.iconPath}}"></image>
        <view class="txt {{selected === index ? 'selectedColor' : ''}}">{{item.text}}</view>
      </view>
      <view wx:if="{{item.search}}" class="item"></view>
    </block>
  </view>
</view>

custom-tab-bar/index.js

Component({
  data: {
    selected: 0,
    color: "#fff",
    selectedColor: "#6777FD",
    list: [
      {
        "pagePath": "/pages/index/index",
        "text": "首页",
        "iconPath": "/assets/images/index.png",
        "selectedIconPath": "/assets/images/indexChecked.png"
      },
      {
        pagePath: "/pages/search/index",
        iconPath: "/assets/images/search.png",
        selectedIconPath: "/assets/images/search.png",
        search: true,
        text: ""
      },
      {
        "pagePath": "/pages/my/index",
        "text": "我的",
        "iconPath": "/assets/images/self.png",
        "selectedIconPath": "/assets/images/selfChecked.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
    }
  }
})

custom-tab-bar/index.json

{
  "component": true
}

custom-tab-bar/index.wxss

/* Componet/tabBar/tabBar.wxss */

.tabBar {
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 20rpx;
  background: #30323B;
  color: #fff;
  box-shadow: 0rpx 1rpx 6rpx rgba(255, 255, 255, 0.3);
}

.cont {
  margin-top: 10rpx;
  padding: 0;
  z-index: 0;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  display: flex;
}

.cont .item {
  font-size: 24rpx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  background-color: inherit;
  overflow: initial;
  justify-content: center;
  align-items: center;
}

.cont .search {
  position: absolute;

}

.cont .item image {
  width: 46rpx;
  height: 46rpx;
  margin: auto
}

.cont .item .txt {
  margin-top: 8rpx;
  color: #fff;
}

.cont .search {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  position: absolute;
  left: 319rpx;
  top: -50rpx;
  background: radial-gradient(#6D2FFF, #7961FF);
  box-shadow: 0 0 30rpx 0 rgb(109, 47, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .search image {
  width: 70rpx;
  height: 70rpx;
  z-index: 2;
  border-radius: 50%;
}

.cont .item .selectedColor {
  color: #6777FD;
}

tab页面：index页面、my页面中使用

page的json中开启组件

"usingComponents":{}

js中使用

 // index 自定义tabbar
if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
  this.getTabBar().setData({
    selected: '/pages/index/index'
  })
}
 // my 自定义tabbar
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
    selected: 0
  })
}

自定义不规则tabbar（使用普通组件的方式来自定义tabbar）

在项目component目录新建目录：tabbar，并以组件形式新增文件

tabbar/index.wxml

<!--component/tabbar/index.wxml-->
<view class="tabBar">
  <view class="cont">
    <block wx:for="{{list}}" wx:key="index" >
      <view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}}">
        <image src="{{selected === item.pagePath  ? item.selectedIconPath : item.iconPath}}"></image>
        <view class="txt {{selected === item.pagePath ? 'selectedColor' : ''}}">{{item.text}}</view>
      </view>
      <view wx:if="{{item.search}}" class="item"></view>
    </block>
  </view>
</view>

tabbar/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    selected: {
      type: String,
      value: ''
    },
  },
  data: {
    color: "#fff",
    selectedColor: "#6777FD",
    list: [
      {
        "pagePath": "/pages/index/index",
        "text": "首页",
        "iconPath": "/assets/images/index.png",
        "selectedIconPath": "/assets/images/indexChecked.png"
      },
      {
        "pagePath": "/pages/search/index",
        "text": "",
        "search": true,
        "iconPath": "/assets/images/search.png",
        "selectedIconPath": "/assets/images/search.png"
      },
      {
        "pagePath": "/pages/my/index",
        "text": "我的",
        "iconPath": "/assets/images/self.png",
        "selectedIconPath": "/assets/images/selfChecked.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      //如果点击当前页面则不进行跳转
      const data = e.currentTarget.dataset
      const url = data.path
      if (this.data.selected == data.index) {
        return false
      }
      wx.switchTab({ url })
    }
  }
})

custom-tab-bar/index.json

{
  "component": true
}

custom-tab-bar/index.wxss

/* component/tabBar/index.wxss */

.tabBar {
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 20rpx;
  background: #30323B;
  color: #fff;
  box-shadow: 0rpx 1rpx 6rpx rgba(255, 255, 255, 0.3);
}

.cont {
  margin-top: 10rpx;
  padding: 0;
  z-index: 0;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  display: flex;
}

.cont .item {
  font-size: 24rpx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  background-color: inherit;
  overflow: initial;
  justify-content: center;
  align-items: center;
}

.cont .search {
  position: absolute;

}

.cont .item image {
  width: 46rpx;
  height: 46rpx;
  margin: auto
}

.cont .item .txt {
  margin-top: 8rpx;
  color: #fff;
}

.cont .search {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  position: absolute;
  left: 319rpx;
  top: -50rpx;
  background: radial-gradient(#6D2FFF, #7961FF);
  box-shadow: 0 0 30rpx 0 rgb(109, 47, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .search image {
  width: 70rpx;
  height: 70rpx;
  z-index: 2;
  border-radius: 50%;
}

.cont .item .selectedColor {
  color: #6777FD;
}

在非tab页面，使用该tabbar组件

page的json中开启组件

"usingComponents": {
    "tabBar":"/component/tabbar/index"
  }

在wxml中使用

<tabBar/>

这篇关于微信小程序自定义tabbar的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信公众号开发

微信小程序自定义tabbar

微信小程序自定义tabbar

官方 custom-tab-bar

规则的tabbar（使用 cover-view等标签来覆盖原生的tabbar，但只能是规则的tabbar）

不规则的tabbar，使用view标签而非cover-view（cover-view标签，不规则的那部分会看不见）

自定义不规则tabbar（使用普通组件的方式来自定义tabbar）

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯