tabbar角标 小程序_小程序自定义底部tabbar

加关注这种话银家怎么好意思说出口嘛

问题点

当小程序原生底部tabbar满足不了我们需求时，那该怎么办！

别急，我们可以忽略官方组件，自己 自定义一个！

效果

使用1

①引入已经封装好的组件(组件代码-->往下看)：

②使用组件

• tabCount：默认显示第几个tabbar

• tabIdex：切换tabbar触发的事件

组件代码

1.wxml

    {{item.name}}

2.wxss

image{

 display: block;

}

.tabBox{

 position: fixed;

 bottom: 0;

 width: 100%;

 height: 96rpx;

 background:#fff;

 display: flex;

 justify-content: space-around;

 align-items: center;

 box-shadow:0px -4rpx 8rpx 0rpx rgba(0,0,0,0.11);

 z-index: 99;

}

.tabList{

 text-align: center;

 font-size: 24rpx;

 flex-grow: 1;

 color: var(--color);

}

.tabImg{

 width: 48rpx;

 height: 48rpx;

 margin: 0 auto;

}

.tabListColor{

 color:rgba(191,191,191,1);

}

@keyframes show {

 from {

   transform: scale(1.3);

 }

 20% {

   transform: scale(0.8);

 }

 40% {

   transform: scale(1);

 }

 60% {

   transform: scale(0.7);

 }

 80%,100% {

   transform: scale(1);

 }

}

.show {

 animation: show 1s;

}

3.js

// components/tab/tab.js

Component({

      /**

       * 组件的属性列表

       */

      properties: {

        tabCount: Number

      },

      /**

       * 组件的初始数据

       */

      data: {

        list: [

          {

            name: "最爱",

            url: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/tab1.png",

            urlNo: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/notab1.png"

          },

          {

            name: "分类",

            url: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/tab2.png",

            urlNo: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/notab2.png"

          },

          {

            name:"互动",

            url: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/tab3.png",

            urlNo: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/notab3.png"

          },

          {

            name: "我的",

            url: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/tab4.png",

            urlNo: "https://lovers-1300783623.cos.ap-shanghai.myqcloud.com/web/tab/notab4.png"

          }

        ],

        // count:1

      },

      attached() {

      },

      /**

       * 组件的方法列表

       */

      methods: {

        tabEvent(e) {

          let { index } = e.currentTarget.dataset;

          this.triggerEvent("tabIdex", index);

        }

      }

})

温馨提示

如需详细使用文档，可在公众号页面点击 联系我们 进行获取！

往期回顾

1六步学会微信小程序开发!2为什么他的下拉刷新是个动画效果？3小程序支持双向绑定！你还不知道吗？好文！必须在看