微信小程序自定义tabbar

2022-08-11 14:31:07 阅读：196 来源： 互联网

标签：index assets 自定义微信 tabbar text images tab png

微信小程序自定义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/>

标签：index,assets,自定义,微信,tabbar,text,images,tab,png
来源： https://www.cnblogs.com/shine-lovely/p/16575915.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序自定义tabbar

微信小程序自定义tabbar

官方 custom-tab-bar

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

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

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