底部导航栏的凸起效果

微信小程序开发教程、开发教学
本视频为1-1号视频，做出了底部导航栏的凸起效果
第一次做视频，希望大家多多支持～
组件源码+项目源码：
链接:https://pan.baidu.com/s/1EkZx_nYyr_hfR1onZXOQ4Q
提取码:gojf

-------2020-8-24补充

在这里插入图片描述先上效果图因为多处需要使用这个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.color}}"  bindtap="shareTherelease" data-url="{
    
    {item.pagePath}}" 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>

wxss

.tabbar_box{
    
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 98rpx;
    /* box-shadow: darkgrey 0px 0px 30px 5px ; */
}
.tabbar_box.iphoneX-height{
    
    
    padding-bottom: 66rpx;
}
.middle-wrapper{
    
    
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  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%;
    position: relative;
}
.tabbar_icon{
    
    
    width: 50rpx;
    height: 50rpx;
}
.special-wrapper{
    
    
  position: absolute;
  /* left: 77rpx; */
  top: -52rpx;
  width: 113rpx;
  height: 113rpx;
  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: 88rpx;
  height: 88rpx;
  padding-top: 7rpx;

}
.special-text-wrapper{
    
    
  width: 56rpx;
  height: 56rpx;
}

// tabBarComponent/tabBar.js
const app = getApp();
Component({
    
    
  /**
   * 组件的属性列表
   */
  properties: {
    
    
    tabbar: {
    
    
      type: Object,
      value: {
    
    
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
    
    
            "pagePath": "pages/spaceHomePage/spaceHomePage",
            "text": "觅书",
            "iconPath": "/img/icon-findbook.png",
            "selectedIconPath": "/img/icon-findbook1.png"
          },
          {
    
    
            "pagePath": "pages/found/found",
            "text": "发现",
            "iconPath": "img/Restaurant1.png",
            "selectedIconPath": "img/Restaurant.png"
          },
          {
    
    
            "pagePath": "/pages/shareTherelease/shareTherelease",
            "text": "共享/发布",
            "iconPath": "pages/img/Restaurant1.png",
            "selectedIconPath": "pages/img/Restaurant.png"
          },
          {
    
    
            "pagePath": "pages/publicWelfare/publicWelfare",
            "text": "公益",
            "iconPath": "pages/img/friend1.png",
            "selectedIconPath": "pages/img/friend.png"
          },
          {
    
    
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "pages/img/mine1.png",
            "selectedIconPath": "pages/img/mine.png"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
    
    // isIphoneX: app.globalData.systemInfo.model == "iPhone X" ? true : false,
  },
  /**
   * 组件的方法列表
   */
  // methods: {
    
    
  //   shareTherelease:{
    
    
  //     wx.navigateTo({
    
    
  //       url: '',
  //     })
  //   }
  // },
  methods: {
    
    
    shareTherelease(e) {
    
    
      console.log(e.currentTarget.dataset.url);
      // wx.navigateTo({
    
    
      //   url: e.currentTarget.dataset.url
      // })
    }
  }

})

因为用到了switchTab所以你得app.json里面配置上你需要switchTab的页面的目录，然后再app.js里面因隐藏掉原生的tabbar

//隐藏系统tabbar
wx.hideTabBar()

在项目中的app.js里面加上如下代码，是配置你自定义的tabbar

globalData: {
    
    
    userInfo: null,
    tabBar: {
    
    
      "backgroundColor": "#ffffff",
      "color": "#333333",
      "selectedColor": "#26C55E",
      "list": [
        {
    
    
          "pagePath": "/pages/spaceHomePage/spaceHomePage",
          "text": "觅书",
          "iconPath": "img/icon-findbook.png",
          "selectedIconPath": "img/icon-findbook1.png"
        },
        {
    
    
          "pagePath": "/pages/found/found",
          "text": "发现",
          "iconPath": "img/icon-found.png",
          "selectedIconPath": "img/icon-found1.png"
        },
        {
    
    
          "pagePath": "/pages/shareTherelease/shareTherelease",
          "isSpecial": true,
          "text": "共享/发布",
          "iconPath": "img/icon_release.png",
          "selectedIconPath": "img/icon_release.png",
        },
        {
    
    
          "pagePath": "/pages/publicWelfare/publicWelfare",
          "text": "公益",
          "iconPath": "img/icon-publicwelfare.png",
          "selectedIconPath": "img/icon-publicwelfare1.png"
        },
        {
    
    
          "pagePath": "/pages/mine/mine",
          "text": "我的",
          "iconPath": "img/icon-mine.png",
          "selectedIconPath": "img/icon-mine1.png"
        }
      ]
    }
  },
  editTabbar: function () {
    
    
    //隐藏系统tabbar
    wx.hideTabBar()
    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
    });
  },

此时组件所有的东西都已经准备好了，
你只需要在你需要调用这个tab的页面调用这个自定义组件就好了，
就是和平常的调用组件的写法一模一样
在你需要调用的wxml这样写

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

然后再对应页面的js中声明

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

``
调用app.js里面的`editTabbar方法，然后你就可以看到在你所需要的界面出现了这个自定义组件啦。别的页面需要引用也是如上方法，

-----2020-8-25补充
顶部导航栏（常规模式）

设置导航栏文字
在相应界面的json中加入属性、值：

“navigationBarTitleText”:“标题内容”,
“navigationBarTextStyle”:“white”
2.设置导航栏颜色

在相应界面的Json 文件中加入属性、值，值只能是十六进制的颜色。

“navigationBarBackgroundColor”:“十六进制颜色”
自定义导航栏（全屏模式）

1. 设置全屏模式

在json文件中加 “navigation"属性，值为：” custom"；

“navigationStyle”: “custom”
2.自定义导航栏

在A.wxml文件中加入代码：

微信小程序
在A.wxss中加入：

.customTitleBar {
position:fixed;/出现滚动条的时候仍能保证标题在最上边/
z-index:10000;/让这个view浮在最上层/
color:white;/设置文字颜色/
text-align:center;/设置文字居中/
width:100%;/设置宽度为整个屏幕的宽度，配置text-align使用/
}
在A.js文件中加入：

data{
top: wx.getMenuButtonBoundingClientRect().top
}
底部导航栏
微信小程序 - 导航栏（顶部+底部+顶部全屏自定义）_第1张图片

1.添加底部导航栏

在app.json中添加代码：

“tabBar”:{
“selectedColor” : “#1296016”,
“list”:[
{
“pagePath” : “pages/index/index”,
“text” : “首页”,
“iconPath” : “/images/icon/home.png”,
“selectedIconPath” : “/images/icon/homeSelected.png”
},
{
“pagePath” : “pages/mine/mine”,
“text” : “我的”,
“iconPath” : “/images/icon/mine.png”,
“selectedIconPath” : “/images/icon/mineSelected.png”
}
]
}
代码中：

selectedColor设置的是选中之后的图标描述文字颜色；
iconPath的值不能为空；
2.导航栏界面之间的跳转

a）“首页”和“我的”之间的跳转时使用switchTab，使用navigateTo、navigateBack和redirectTo并不起作用；

b）从首页跳到“page1”（page1不是带有底部导航栏的页面），那么在page1界面要跳回到首页的话使用redirectTo和navigateTo是没用的，使用switchTab或者navigateBack(使用navigateBack的前提是从首页跳到page1用的是navigateTo)

wx.switchTab({
url:’…/page1/page1’
});

地址：https://www.it610.com/article/1280147377784635392.htm

底部导航栏的凸起效果

猜你喜欢