微信小程序底部突起半圆设计

爱被打了一巴掌 2022-10-30 07:22 198阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

源码 [https://gitee.com/coderwcb/wechat][https_gitee.com_coderwcb_wechat]

![在这里插入图片描述][20210218112828400.png]  
tabbar.js

// tabBarComponent/tabBar.js
    const app = getApp();
    Component({ 
     
      properties: { 
        tabbar: { 
          type: Object,
          value: { 
            "backgroundColor": "#ffffff",
            "color": "#979795", 
            "selectedColor": "#1c1c1b",
            "list": [
              {  "pagePath": "/pages/index/index", },
               {  "pagePath": "/pages/assemblyNumber/assemblyNumber", },
               {  "pagePath": "/pages/message/message", },
               {  "pagePath": "/pages/message/message", },
               {  "pagePath": "/pages/my/my", },
              
        
            ]
          }
        }
      },
      data: { 
        isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
      },
    
     
    })

tabbar.json

{ 
      "component": true,
      "usingComponents": { }
    }

tabbar.wxml

tabbar,wxss

.tabbar_box{  display: flex; flex-direction: row; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height: 100rpx; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .tabbar_box.iphoneX-height{  padding-bottom: 66rpx; } .middle-wrapper{  position: absolute; right: 310rpx; bottom: 0; background-color: rgb(121, 27, 27); width: 120rpx; height: 120rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; } .middle-wrapper.iphoneX-height{  bottom: 66rpx; } .tabbar_nav{  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; padding:5px 0px 5px 0px; position: relative; } .tabbar_icon{  width: 40rpx; height: 40rpx; padding-bottom: 5rpx; } .special-wrapper{  position: absolute; /* left: 77rpx; */ top: -36rpx; width: 96rpx; height: 96rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; background-color: #fff; text-align: center; box-sizing: border-box; padding: 6rpx; } .special-wrapper .tabbar_icon{  width: 85rpx; height: 85rpx; } .special-text-wrapper{  width: 56rpx; height: 56rpx; } text{  padding-bottom: 20rpx; }

app.json

{ 
      "pages": [
        "pages/index/index",
        "pages/category/category",
        "pages/cart/cart",
        "pages/mine/mine" ,
        "pages/isbn/isbn" 
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
      },
      "tabBar": { 
        "backgroundColor": "#ffffff",
        "color": "#CCCCCC",
        "selectedColor": "#CC0000",
        "list": [
          {         "pagePath": "pages/index/index"      },
          {         "pagePath": "pages/category/category"      },
          {         "pagePath": "pages/cart/cart"      },
          {         "pagePath": "pages/mine/mine"      }
     
        ]
      },
      "sitemapLocation": "sitemap.json"
    }

app.js

//app.js
    App({ 
      onLaunch: function () { 
        // 获取设备信息
        this.getSystemInfo();
      },
      onShow(){     wx.hideTabBar();},
      getSystemInfo: function () { 
        //隐藏系统tabbar
        wx.hideTabBar();
        let t = this;
        wx.getSystemInfo({ 
          success: function (res) { 
            t.globalData.systemInfo = res;
          }
        });
      },
    
      editTabbar: function () { 
        let tabbar = this.globalData.tabBar;
        let currentPages = getCurrentPages();
        let _this = currentPages[currentPages.length - 1];
        let pagePath = _this.route;
        (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
        for (let i in tabbar.list) { 
          tabbar.list[i].selected = false;
          (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
        }
        _this.setData({ 
          tabbar: tabbar
        });
      },
    
      globalData: { 
        userInfo: null,
    
        tabBar: { 
          "backgroundColor": "#ffffff",
          "color": "#CCCCCC",
          "selectedColor": "#58a49a",
          "list": [{ 
              "pagePath": "/pages/index/index",
              "iconPath": "icon/1_y.png",
              "selectedIconPath": "icon/1.png",
              "text": "首页"
            },
            { 
              "pagePath": "/pages/category/category",
              "iconPath": "icon/2_y.png",
              "selectedIconPath": "icon/2.png",
              "text": "分类"
            },
            { 
              "pagePath": "/pages/isbn/isbn",
              "iconPath": "icon/icon_release.png",
              "isSpecial": true,
              "text": "扫一扫"
            },
            { 
              "pagePath": "/pages/cart/cart",
              "iconPath": "icon/3_y.png",
              "selectedIconPath": "icon/3.png",
              "text": "借书栏"
            },
            { 
              "pagePath": "/pages/mine/mine",
              "iconPath": "icon/4_y.png",
              "selectedIconPath": "icon/4.png",
              "text": "我的"
            },
    
          ]
        }
      }
    })

### 调用 ###

indexjs

const app = getApp()
    Page({ 
      onLoad: function (options) { 
        app.editTabbar();
      },
     
    })

index.json

{ 
      "usingComponents": { 
        "tabbar": "/components/tabbarComponent/tabbar"
      }
    }

index.wxml

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20221024/26952e74151b47868ee835fe62644f9d.png
[https_gitee.com_coderwcb_wechat]: https://gitee.com/coderwcb/wechat
[20210218112828400.png]: /images/20221024/534352c6ce1b435b896b10836b304b72.png