源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 微信小程序自定义凸起tabBar组件源码的详细说明 [打印本页]
作者: 洪七公    时间: 2023-3-23 13:53
标题: 微信小程序自定义凸起tabBar组件源码的详细说明

大家可能见过不少的微信小程序的tabBar是不规则的，而是某个button杀死凸起的圆球状态的，比如天下网吧微信小程序的tabBar就是这样的：



这个tabBar中间的就是一个圆形「凸起」的button。当然还有更多的小程序他们的tabBar更酷炫，有很多不错的动画效果。

那么如何实现这样的不规则tabBar呢？答案是得用自定义tabBar

咱们今天以天下网吧的自定义tabBar组件源码（源码在文章最底部有下载链接）为例，希望能抛砖引玉让大家分享自己的不错的自定义tabbar组件：

wxml:
  1. <view class="txwb_tabBar" wx:if="{{true}}">
  2.                 <view class="cu-bar tabbar bg-white ">
  3.                                 <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
  4.                                                 <view class="action {{item.iconTopClass}} {{item.current==1?'text-green':''}}" catchtap='goToTab' data-url="{{item.pagePath}}" data-index="{{index}}" style="{{item.current==1?item.activeStyle:item.style}}">
  5.                                                                 <view class="reddot" wx:if="{{item.reddot>0}}"></view>
  6.                                                                 <image wx:if="{{item.iconImage}}" src="{{item.current==1?item.iconImageActive:item.iconImage}}" style="{{item.iconImagStyle}}" />
  7.                                                                 <botton wx:else class='iconfont iconf {{item.current==1?item.iconClassSelected:item.iconClass}}' />
  8.                                                                 {{item.text}}
  9.                                                 </view>
  10.                                 </block>
  11.                                 <view class="tui-hump-box-bk"></view>
  12.                                 <view class="tui-hump-box "></view>
  13.                 </view>
  14. </view>
复制代码

js:
  1. /*
  2. * @info: 文件说明：主要功能介绍等
  3. * @Description: 全局功能介绍和注意事项
  4. * @Author: tt
  5. * @Date: 2020-05-27 11:07:52
  6. * @LastEditTime: 2021-03-15 15:43:31
  7. * @LastEditors: tt
  8. */
  9. /*jshint esversion: 6 */
  10. Component({
  11.         properties: {
  12.                 idx: {
  13.                         type: Number,
  14.                         value: 0
  15.                 },
  16.                 reddot: {
  17.                         type: Number,
  18.                         value: 0
  19.                 },
  20.                 //当前索引
  21.                 current: {
  22.                         type: Number,
  23.                         value: 0
  24.                 },
  25.                 //字体颜色
  26.                 color: {
  27.                         type: String,
  28.                         value: "#666"
  29.                 },
  30.                 //字体选中颜色
  31.                 selectedColor: {
  32.                         type: String,
  33.                         value: "#5677FC"
  34.                 },
  35.                 //背景颜色
  36.                 backgroundColor: {
  37.                         type: String,
  38.                         value: "#FFFFFF"
  39.                 },
  40.                 //是否需要中间凸起按钮
  41.                 hump: {
  42.                         type: Boolean,
  43.                         value: false
  44.                 },
  45.                 //固定在底部
  46.                 isFixed: {
  47.                         type: Boolean,
  48.                         value: true
  49.                 },
  50.                 //角标字体颜色
  51.                 badgeColor: {
  52.                         type: String,
  53.                         value: "#fff"
  54.                 },
  55.                 //角标背景颜色
  56.                 badgeBgColor: {
  57.                         type: String,
  58.                         value: "#F74D54"
  59.                 },
  60.                 unlined: {
  61.                         type: Boolean,
  62.                         value: false
  63.                 }
  64.         },
  65.         data: {
  66.                 tabBar: [{
  67.                                 "current": 0,
  68.                                 "pagePath": "/pages/index/index",
  69.                                 "text": "首页",
  70.                                 "iconClass": "icon-shouye1",
  71.                                 "iconClassSelected": "icon-shouyexuanzhongx",
  72.                                 "iconTopClass": "",
  73.                                 "style": "",
  74.                                 "activeStyle": "",
  75.                         },
  76.                         {
  77.                                 "current": 0,
  78.                                 "pagePath": "/pages/forum/forum",
  79.                                 "text": "版块",
  80.                                 "iconClass": "icon-bankuaifl",
  81.                                 "iconClassSelected": "icon-wodebankuai",
  82.                                 "iconTopClass": "",
  83.                                 "style": "",
  84.                                 "activeStyle": "",
  85.                         },
  86.                         {
  87.                                 "current": 0,
  88.                                 "pagePath": "/pages/add_forum_article/add_forum_article",
  89.                                 "text": "发布",
  90.                                 "iconClass": "cu-btn icon-add bg-green shadow icon-xinzeng",
  91.                                 "iconClassSelected": "cu-btn icon-add bg-green shadow icon-xinzeng",
  92.                                 "iconTopClass": "add-action",
  93.                                 "style": "",
  94.                                 "activeStyle": "",
  95.                         },
  96.                         {
  97.                                 "current": 0,
  98.                                 "pagePath": "/pages/map/map",
  99.                                 "text": "天下码农",
  100.                                 "iconClass": "icon-fujin",
  101.                                 "iconClassSelected": "icon-fujindianji",
  102.                                 "iconTopClass": "",
  103.                                 "style": "",
  104.                                 "activeStyle": "",
  105.                         },
  106.                         {
  107.                                 "current": 0,
  108.                                 "pagePath": "/pages/user/user",
  109.                                 "text": "我的",
  110.                                 "iconClass": "icon-wode2",
  111.                                 "iconClassSelected": "icon-wode1",
  112.                                 "iconTopClass": "",
  113.                                 "reddot": 0,
  114.                                 "style": "",
  115.                                 "activeStyle": "",
  116.                         },
  117.                 ]
  118.         },
  119.         observers: {
  120.                 "idx": function (id) {
  121.                         var otabbar = this.data.tabBar;
  122.                         otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath'] //换当前的icon
  123.                         otabbar[id]['current'] = 1;
  124.                         this.setData({
  125.                                 tabBar: otabbar
  126.                         });
  127.                 },
  128.                 "idx,reddot": function (id, reddot) {
  129.                         var otabbar = this.data.tabBar;
  130.                         otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath'] //换当前的icon
  131.                         otabbar[id]['current'] = 1;
  132.                         otabbar[4]['reddot'] = reddot;
  133.                         this.setData({
  134.                                 tabBar: otabbar
  135.                         });
  136.                 }
  137.         },
  138.         methods: {
  139.                 goToTab: function (e) {
  140.                         var url = e.currentTarget.dataset.url;
  141.                         wx.switchTab({
  142.                                 url: url,
  143.                                 fail: res => {
  144.                                         console.log("switchTab faild:", res);
  145.                                         wx.navigateTo({
  146.                                                 url
  147.                                         });
  148.                                 }
  149.                         });
  150.                 },
  151.                 async getTabBarMenu() {
  152.                 }
  153.         },
  154.         lifetimes: {
  155.                 // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  156.                 attached: function () {
  157.                 },
  158.                 ready(){
  159.                         this.getTabBarMenu();
  160.                 },
  161.                 moved: function () {},
  162.                 detached: function () {},
  163.         },
  164. });
复制代码

wxss:
  1. [url=home.php?mod=space&uid=554307]@import[/url] '/iconfont.wxss';
  2.  
  3. .txwb_tabBar {
  4.         width: 100%;
  5.         position: fixed;
  6.         bottom: 0;
  7.         font-size: 20rpx;
  8.         color: #8A8A8A;
  9.         z-index: 100000;
  10. }
  11.  
  12. .iconf {
  13.         font-family: "iconfont" !important;
  14.         font-size: inherit;
  15.         font-style: normal;
  16.         width: 100rpx;
  17.         position: relative;
  18.         display: block;
  19.         height: auto;
  20.         margin: 0 auto 10rpx;
  21.         text-align: center;
  22.         font-size: 40rpx;
  23. }
  24.  
  25. .text-green {
  26.         color: #4cb4e7;
  27. }
  28.  
  29. .shadow {
  30.         box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  31. }
  32.  
  33. .bg-red {
  34.         background-color: #e54d42;
  35.         color: #fff;
  36. }
  37.  
  38. .bg-orange {
  39.         background-color: #f37b1d;
  40.         color: #fff;
  41. }
  42.  
  43. .bg-yellow {
  44.         background-color: #fbbd08;
  45.         color: #333;
  46. }
  47.  
  48. .bg-olive {
  49.         background-color: #8dc63f;
  50.         color: #fff;
  51. }
  52.  
  53. .bg-green {
  54.         background-color: #4cb4e7;
  55.         color: #fff;
  56. }
  57.  
  58. .bg-cyan {
  59.         background-color: #1cbbb4;
  60.         color: #fff;
  61. }
  62.  
  63. .bg-blue {
  64.         background-color: #0081ff;
  65.         color: #fff;
  66. }
  67.  
  68. .bg-purple {
  69.         background-color: #6739b6;
  70.         color: #fff;
  71. }
  72.  
  73. .bg-mauve {
  74.         background-color: #9c26b0;
  75.         color: #fff;
  76. }
  77.  
  78. .bg-pink {
  79.         background-color: #e03997;
  80.         color: #fff;
  81. }
  82.  
  83. .bg-brown {
  84.         background-color: #a5673f;
  85.         color: #fff;
  86. }
  87.  
  88. .bg-grey {
  89.         background-color: #8799a3;
  90.         color: #fff;
  91. }
  92.  
  93. .bg-gray {
  94.         background-color: #f0f0f0;
  95.         color: #666;
  96. }
  97.  
  98. .bg-black {
  99.         background-color: #333;
  100.         color: #fff;
  101. }
  102.  
  103. .bg-white {
  104.         background-color: #fff;
  105.         color: #666;
  106. }
  107.  
  108. .shadow .bg-green {
  109.         box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2);
  110. }
  111.  
  112. .cu-bar.tabbar .action.add-action .icon-add {
  113.         position: absolute;
  114.         width: 70rpx;
  115.         z-index: 2;
  116.         height: 70rpx;
  117.         border-radius: 50%;/* +号 */
  118.         line-height: 70rpx;
  119.         font-size: 50rpx;
  120.         top: -35rpx;
  121.         left: 0;
  122.         right: 0;
  123.         margin: auto;
  124.         padding: 0;
  125. }
  126.  
  127. .cu-bar.tabbar .action.add-action::after {
  128.         content: "";
  129.         position: absolute;
  130.         width: 40rpx;
  131.         height: 40rpx;
  132.         top: calc(-38rpx + env(safe-area-inset-bottom) / 4.5);
  133.         left: 0;
  134.         right: 0;
  135.         margin: auto;
  136.         box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
  137.         border-radius: 50%;/* 突出 */
  138.         background-color: inherit;
  139.         z-index: 0;
  140. }
  141.  
  142. .cu-bar.tabbar .action.add-action::before {
  143.         content: "";
  144.         position: absolute;
  145.         width: 100rpx;
  146.         height: 30rpx;
  147.         bottom: 30rpx;
  148.         left: 0;
  149.         right: 0;
  150.         margin: auto;
  151.         background-color: inherit;
  152.         z-index: 1;
  153. }
  154.  
  155. .cu-btn {
  156.         position: relative;
  157.         display: inline-flex;
  158.         align-items: center;
  159.         justify-content: center;
  160.         box-sizing: border-box;
  161.         padding: 0 30rpx;
  162.         font-size: 28rpx;
  163.         height: 64rpx;
  164.         line-height: 1;
  165.         text-align: center;
  166.         text-decoration: none;
  167.         overflow: visible;
  168.         margin-left: initial;
  169.         transform: translate(0rpx, 0rpx);
  170.         margin-right: initial;
  171. }
  172.  
  173. .cu-btn::after {
  174.         display: none;
  175. }
  176.  
  177. .cu-bar {
  178.         display: flex;
  179.         position: relative;
  180.         align-items: center;
  181.         min-height: 100rpx;
  182.         justify-content: space-between;
  183. }
  184.  
  185. .cu-bar .action {
  186.         display: flex;
  187.         align-items: center;
  188.         height: 100%;
  189.         justify-content: center;
  190.         max-width: 100%;
  191.         z-index: 3 !important;
  192. }
  193.  
  194. .cu-bar.tabbar .action .icon-add {
  195.         width: 100rpx;
  196.         position: relative;
  197.         display: block;
  198.         height: auto;
  199.         margin: 0 auto 10rpx;
  200.         text-align: center;
  201.         font-size: 40rpx;
  202. }
  203.  
  204. .cu-bar.tabbar {
  205.         padding: 0;
  206.         z-index: 0;
  207.         height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  208.         padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  209. }
  210.  
  211. .cu-bar {
  212.         margin-top: 20rpx;
  213. }
  214.  
  215. .cu-bar .action:first-child {
  216.         margin-left: 30rpx;
  217.         font-size: 30rpx;
  218. }
  219.  
  220. .cu-bar.tabbar .action {
  221.         font-size: 22rpx;
  222.         position: relative;
  223.         flex: 1;
  224.         text-align: center;
  225.         padding: 0;
  226.         display: block;
  227.         height: auto;
  228.         line-height: 1;
  229.         margin: 0;
  230.         background-color: inherit;
  231.         overflow: initial;
  232. }
  233.  
  234. .cu-bar.tabbar .action.add-action {
  235.         position: relative;
  236.         z-index: 2;
  237.         padding-top: 50rpx;
  238. }
  239.  
  240. .icon-fabu {
  241.         color: #4cb4e7;
  242. }
  243.  
  244. .reddot {
  245.         background-color: #ff693d;
  246.         height: 16rpx;
  247.         width: 16rpx;
  248.         border-radius: 16rpx;
  249.         right: 22px;
  250.         position: absolute;
  251.         top: -5rpx;
  252. }
  253.  
  254. .txwb-tabbar {
  255.         width: 100%;
  256.         height: 100rpx;
  257.         display: flex;
  258.         align-items: center;
  259.         justify-content: space-between;
  260.         position: relative;
  261.         background-color: #FFFFFF;
  262. }
  263.  
  264. .txwb-tabbar-fixed {
  265.         position: fixed;
  266.         z-index: 99999;
  267.         left: 0;
  268.         bottom: 0;
  269.         padding-bottom: env(safe-area-inset-bottom);
  270. }
  271.  
  272. .tabbar::before,
  273. .txwb-tabbar::before {
  274.         content: '';
  275.         width: 100%;
  276.         border-top: 1rpx solid #B2B2B2;
  277.         position: absolute;
  278.         top: -1rpx;
  279.         left: 0;
  280.         transform: scaleY(0.5);
  281.         transform-origin: 0 100%;
  282. }
  283.  
  284. .txwb-tabbar-item {
  285.         height: 100%;
  286.         flex: 1;
  287.         display: flex;
  288.         text-align: center;
  289.         align-items: center;
  290.         flex-direction: column;
  291.         justify-content: space-between;
  292.         position: relative;
  293.         padding: 10rpx 0 20rpx 0;
  294.         box-sizing: border-box;
  295.         z-index: -1;
  296. }
  297.  
  298. .tui-icon-box {
  299.         position: relative;
  300. }
  301.  
  302. .tui-item-hump {
  303.         height: 98rpx;
  304.         z-index: 2;
  305. }
  306.  
  307. .txwb-tabbar-icon {
  308.         width: 52rpx;
  309.         height: 52rpx;
  310.         display: block;
  311. }
  312.  
  313. .tui-hump-box-bk {
  314.         width: 140rpx;
  315.         height: 80rpx;
  316.         background: #FFFFFF;
  317.         position: absolute;
  318.         left: 50%;
  319.         transform: translateX(-50%);
  320.         top: 1rpx;
  321.         z-index: 2;
  322. }
  323.  
  324. .tui-hump-box {
  325.         width: 100rpx;
  326.         height: 100rpx;
  327.         background: #FFFFFF;
  328.         position: absolute;
  329.         left: 50%;
  330.         transform: translateX(-50%);
  331.         top: calc(-38rpx + env(safe-area-inset-bottom) / 4.5);
  332.         border-radius: 50%;
  333.         z-index: 1;
  334. }
  335. /* .cu-bar.tabbar .action.add-action::before , */
  336. .tui-hump-box::before {
  337.         content: '';
  338.         height: 200%;
  339.         width: 200%;
  340.         border: 1rpx solid #B2B2B2;
  341.         position: absolute;
  342.         top: 0;
  343.         left: 0;
  344.         transform: scale(0.5) translateZ(0);
  345.         transform-origin: 0 0;
  346.         border-radius: 100%;
  347. }
  348.  
  349. [url=home.php?mod=space&uid=164055]@media[/url] (prefers-color-scheme: dark) {
  350.         .bg-white {
  351.                 background-color: #2e2f31;
  352.                 color: white;
  353.         }
  354.  
  355.         .cu-bar.tabbar .action.add-action::after {
  356.                 box-shadow: none;
  357.         }
  358.  
  359.         .hump-add {
  360.                 background: #2e2f31 !important;
  361.         }
  362.  
  363.         .bg-green {
  364.                 background-color: #2e2f31;
  365.         }
  366.  
  367.         .shadow .bg-green {
  368.                 box-shadow: -1rpx -1rpx 20rpx rgba(255, 255, 255, 0.2);
  369.         }
  370.  
  371.         .shadow {
  372.                 box-shadow: -1rpx -1rpx 20rpx rgba(255, 255, 255, 0.2);
  373.         }
  374.  
  375.         .tui-hump-box-bk,
  376.         .tui-item-hump,
  377.         .txwb-tabbar,
  378.         .tui-hump-box {
  379.                 background-color: #2e2f31 !important;
  380.         }
  381.  
  382.         .tui-hump-box::before,
  383.         .tabbar::before,
  384.         .txwb-tabbar::before {
  385.                 border-top: 1rpx solid rgb(255, 255, 255, 0.5);
  386.         }
  387. }
复制代码

好了，今天小程序自定义凸起tabBar组件源码的详细说明就到这了，希望能帮助到大家，喜欢和支持锦尚中国的朋友们，如果需要更多的素材、资源、源码请搜索锦尚中国获取！





欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3