小程序tabbar这套方案全搞定!

12,398 阅读4分钟

关于微信小程序的tarbar,相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板,不够精致,往往不符合自己的要求

  • 这个时候怎么办呢
    这套方案接着!

先简单的来说一下主要思想:
自定义字体图标组件以及tabbar组件,在tabbar中引用自定义字体图标组件。

先说一下这套方案的优点:

  1. 图片换成字体,体积小,请求减少,性能提高
  2. 自己定义tabbar,能够从细节各方面达到自己的要求,精确到1像素
  3. 组件可以根据自己的条件来更换tabbar图标(比如你点进一个页面想把这个页面的tabbar样式自己更换) 总而言之就是自由性很大,精准性良好,能够去随心所欲的打造你的专属tabbar!

实现这套方案核心还是自定义组件

那就从这开始聊:
一个自定义组件由 json wxml wxss js 4个文件组成。

  • 一个页面要引用一个组件时只需要在该页面的json配置下添加如下
{
//声明引用一个组件 配置好你的组件引用路径
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
  • 然后再页面上添加组件的标签即可。
//这样就能够在你的页面中添加组件
<icon type="" color="" size=""/>

如果对于组件的定义仍有疑惑的可以参考这份文档: 官方关于自定义组件的文档



OK 下面我们正式来讲这份方案:

  1. 先定义字体图标组件,在阿里图标库里面挑选好你所需要的字体选择下载代码。
    这里我选择的是其中的_fontclass方案,
  2. 把iconfont.css内的内容拷贝到你创建的icon目录下的index.wxss

3. 将该目录下index.json添加

{  
//声明这一组文件设为自定义组件
  "component": true,
  "usingComponents": {}
}
  1. 在index.wxml中定义该组件的结构
<!-- 注意style里面的分号! -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
  1. 在js里面配置他的属性
//这里定义了3个自定义属性他们通过{{}}与wxml中的数据连接起来
 Component({
  properties: {
    type: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: '#000000'
    },
    size: {
      type: Number,
      value: '45'
    }
  }
})

到此,字体图标组件搞定。

现在开始第二步,搞定tabbar组件。

  1. 首先做在json中添加配置
 {
  "component": true,
  //声明对字体图标组件的引用
  "usingComponents": {
    "icon": "../../components/icon/index"
  }
}
  1. 写wxml结构
<view class="weibo-tabbar" >
//绑定回首页事件,此处的data-hi中的数据是为了传递到e.currentTarget.dataset.hi
//通过这个数据我们可以用来判断是否处于首页,然后在js中配置可以阻扰原地跳转
    <view class="item-left"  bindtap="goHome" data-hi="{{isIndex}}">
            <icon type="shouye" color="{{isIndex?'#000000':'#b1b1b1'}}" size="45"/>
            <text class="1" style="color:{{isIndex?'#000000':'#b1b1b1'}}">首页</text>
    </view>
    <block wx:if="{{isInner}}">
        <view class="item-right" style="color:#b1b1b1" bindtap="goShare">
        <icon type="fenxiang" color="gray" size="45"/>
            <text class="2">分享</text>
        </view>
    </block>
    <block wx:else>
        <view class="item-right"  bindtap="goInfo" data-hi="{{isIndex}}">
        <icon type="wode" color="{{isIndex?'#b1b1b1':'#000000'}}" size="45"/>
            <text class="2" style="color:{{isIndex?'#b1b1b1':'#000000'}}">我的</text>
        </view>
    </block>
</view>
  1. 再配置js属性及方法
const app = getApp();
Component({
  properties: {
    isIndex: { // 是否主页            
      type: Boolean,
      value: false,
    },
    isInner: { //是否内部页面
      type: Boolean,
      value: false,
    },
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    goHome: (e) => {
      // 判断是否为主页面防止原地跳转
      if(!e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/index/index"
        })
      }
    },
    goShare: function () {
    },
    goInfo: (e) => {
        if(e.currentTarget.dataset.hi){
        wx.redirectTo({
          url: "/pages/info/info"
        })
      }
    }
  }
})
  1. 配置样式wxss
.weibo-tabbar {
    bottom: 0;
    height: 97rpx;
    padding: 12rpx 0rpx;
    display: flex;
    width: 100%;
    position: fixed;
    background: #ffffff;
    box-sizing: border-box;
}
//产生优雅的0.5px边框
.weibo-tabbar::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    border-top: 1rpx solid rgba(177, 177, 177, 0.4);
    transform: scale(0.5);
    transform-origin: 0 0;
  }
  //这里用flex布局,移动端flex布局确实很爽
  .weibo-tabbar .item-left, .item-right{
   //这里有一处坑,若不不设置他的层级变大的话
   //你是点不到这个item按钮的,当然也不会产生触碰事件
    z-index: 999;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
    color: #b1b1b1;
}
.shouye, .wode {
    height: 45rpx;
    width: 45rpx;
}

到此你只需要在你的页面优雅的添加一行,就能在你的页面中产生tabbar

//此处isIndex是给组件的属性传输值,别属性不添加即为默认属性值
<tabbar isIndex="true"></tabbar>

结果:

哇,看了半天就出这么一个小东西!
其实大道至简
掌握这套方案能够适配你需要的所有tabbar
他的颜色、大小、位置都可以自己掌控,重要的是这个解决方案。


最后强调一下里面的一些坑
  1. 按钮的样式层级z-index要提高
  2. 属性值与{{}}传输的把握
  3. style="color:{{color}}; font-size:{{size}}" 注意里面的;号

觉得不错的话可以点个赞鼓励一下哟