用图标自定义tabbar底部导航栏-------微信小程序

本文链接： https://blog.csdn.net/weixin_42301962/article/details/100090264

微信小程序自带的tabbar只能使用图片，图片模糊不清晰不能达到客户的满意于是自己写了个tabbar

在pages同目录下，创建一个template目录，创建template.wxml template.wxss template.js
template.wxml

<!--template/template.wxml-->
<template name="tabBar">
  <view style="height:90rpx;"></view>
  <view class="tabbar" enable-flex="true">
    <block wx:for="{{tabBar.tab}}" wx:for-item="item" wx:for-index="idx" wx:key="*">
      <navigator url="{{item.url}}" class="{{tabBar.Selected==idx?'active':''}}" open-type="switchTab">
        <view class="tabbar-box">
          <icon class="iconfont {{item.icon}}"></icon>
          <text>{{item.name}}</text>
        </view>
      </navigator>
    </block>
  </view> 
</template>

template.wxss

/* template/template.wxss */
.tabbar{
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
  width: 100%;
  height: 90rpx;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row; /* Safari */  
  align-items: center;
  box-shadow: 0px 0px 4px #dbdada;
}
navigator{
  width: 100%;
  height: 90rpx;
  text-align:center; 
}
navigator.active icon,navigator.active text{
  color: #62ab00 !important;
}
.navigator-hover{
  background-color: initial;
  opacity: 1;
}
.tabbar .tabbar-box{
  width: 100%;
}
.tabbar .tabbar-box{
  width: 100%;
}
.tabbar .tabbar-box icon{
  color: #a3a3a3;
}
.tabbar .tabbar-box text{
  display: block;
  color: #a3a3a3;
  font-size: 24rpx;
}

template.js


var tabList = {
  tab:[
    {
      url: '/pages/index/index',
      icon: 'icon-shangcheng',
      name: '商城'
    }, {
      url: '/pages/news/news',
      icon: 'icon-zixun',
      name: '资讯'
    }, {
      url: '/pages/shareIntegral/shareIntegral',
      icon: 'icon-fenxiang',
      name: '分享积分'
    }, {
      url: '/pages/member/member',
      icon: 'icon-ziyuan',
      name: '我的'
    }],
  Selected: 0
}

//输出出口
module.exports = {
  templates: tabList
}

需要在4个tabbar页面引入js，wxml文件，在app.wxss引入图标的wxss文件和template.wxss文件

var tabDate = require('../../template/template.js')   // 对应的js头部引入
// 对应的onLoad中写
  wx.hideTabBar({});  //隐藏自带的底部tabbar
   tabDate.templates.Selected =0;
// tabDate.templates.Selected =1;
// tabDate.templates.Selected =2;
// tabDate.templates.Selected =3;
    this.setData({
      tabBar: tabDate.templates
    });


<import src="../../template/template.wxml"/>  // 对应的wxml头部引入
<template is="tabBar" data="{{tabBar}}"/>   // 对应的wxml底部引入

app.json (这个可以全部删除，需要在template.wxml中的navigator标签中修改 open-type=“navigate”>)

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/news/news"
      },
      {
        "pagePath": "pages/shareIntegral/shareIntegral"
      },
      {
        "pagePath": "pages/member/member"
      }
    ]
  },

如有不足之处，或有更好的方法，欢迎交流

用图标自定义tabbar底部导航栏-------微信小程序

猜你喜欢