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

源码 https://gitee.com/coderwcb/wechat

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

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate">
      <view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
      <image class='special-text-wrapper'></image>
      <text>{{item.text}}</text>
    </navigator>
    <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>

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

	<tabbar tabbar="{{ tabbar }}"></tabbar>