欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序如何實現(xiàn)中間帶加號的tabbar

 更新時間：2022年04月29日 10:44:45   作者：安小軒  
自定義tabBar可以讓開發(fā)者更加靈活地設置tabBar樣式,以滿足更多個性化的場景,下面這篇文章主要給大家介紹了關于小程序如何實現(xiàn)中間帶加號tabbar的相關資料,需要的朋友可以參考下

前言

相信大家也看過很多app或者小程序的tabbar中間是一個突出加號，這個用自帶的組件無法實現(xiàn)，需要我們手動寫一個tabbar的樣式來實現(xiàn)效果。我們一起看看吧！

首先新建一個tabbar的組件。

html代碼

注意點：需要判斷是否是iphonex系列的手機，這類手機需要設置高度。對于中間的加號突出的菜單，格外設置樣式。直接使用了navigator，省去了需要寫方法跳轉這一步驟。但是需要設置hover-class="none"屬性。避免點擊時候有陰影出現(xiàn)。

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

js代碼

定義tabbar的數(shù)據(jù)，包括選中圖標和未選中圖標，路徑url和菜單文本值。

 data: {
    isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false,
    tabbar: [{
        "pagePath": "/teacher/pages/teach/classroom/classroom",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index-active.png",
        "text": "首頁"
    },
    {
        "pagePath": "/teacher/pages/teach/publish/publish",
        "isSpecial": true,
    },
    {
        "pagePath": "/teacher/pages/teach/mine/mine",
        "iconPath": "/image/index.png",
        "selectedIconPath": "/image/index-active.png",
        "text": "我的"
    }],
}

在需要的頁面引入組件

在需要你用到tabbar的頁面引入組件

{
  "usingComponents": {
    "custom-tabbar": "../../components/common/custom-tabbar/custom-tabbar",
  }
}

適用不同頁面

可能會有不同的頁面需要展示不同tabbar的時候，可以通過傳參from，來判斷是哪個頁面引用的。從而展示不通的tabbar數(shù)據(jù)。就可以適用于其他需要tabbar的頁面。

<custom-tabbar from="classroom"></custom-tabbar>

設置tabbar選中狀態(tài)

通過判斷當前路由和當前tabbar數(shù)據(jù)的path，對比成功后設置selected屬性，實現(xiàn)選中效果。

setTabbar(){
    let currentPages = getCurrentPages();
    let pagePath = currentPages[currentPages.length - 1].route;
    this.data.tabbar.forEach(item => {
        item.selected = false;
        if(item.pagePath.indexOf(pagePath) > -1){
            item.selected = true;
        }
    })
    this.setData({
        tabbar: this.data.tabbar
    });
 }

css代碼

樣式文件

.tabbar_box{
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 98rpx;
    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: #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;
    color: rgba(0, 0, 0, 0.45);
    font-size: 24rpx;
}

.tabbar_icon{
    width: 42rpx;
    height: 42rpx;
    margin-bottom: 10rpx;
}

.special-wrapper{
  position: absolute;
  top: -30rpx;
  width: 74rpx;
  height: 74rpx;
  border-radius: 50%;
  background-color: var(--main-font-color);
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
  font-size: 54rpx;
  line-height: 54rpx;
  color: #fff;
}

.selected {
    color: var(--main-font-color);
}

最終效果

以上就是實現(xiàn)帶加號的tabbar的全部代碼了，記錄一下，溫故而知新！

總結

到此這篇關于小程序如何實現(xiàn)中間帶加號tabbar的文章就介紹到這了,更多相關小程序加號tabbar內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • javascript的var與let,const之間的區(qū)別詳解

    javascript的var與let,const之間的區(qū)別詳解

    這篇文章主要為大家介紹了?javascript的var與let,const之間的區(qū)別，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-12-12
  • JavaScript時間復雜度和空間復雜度

    JavaScript時間復雜度和空間復雜度

    這篇文章主要介紹了JavaScript時間復雜度和空間復雜度，時間復雜度和空間復雜度是衡量一個算法是否優(yōu)秀的標準，通常我們比較兩個算法時會用預先估算和事后統(tǒng)計，下文詳細介紹，需要的朋友可以參考一下
    2022-07-07
  • ES6學習筆記之正則表達式和字符串正則方法分析

    ES6學習筆記之正則表達式和字符串正則方法分析

    這篇文章主要介紹了ES6學習筆記之正則表達式和字符串正則方法,結合實例形式對比分析了ES5與ES6正則操作的常用函數(shù)功能與用法區(qū)別,需要的朋友可以參考下
    2017-04-04
  • 頁面js遇到亂碼問題的解決方法是和無法轉碼的情況

    頁面js遇到亂碼問題的解決方法是和無法轉碼的情況

    在老項目里加些js文件和老項目的編碼格式不一致出現(xiàn)亂碼，由于兩個文件都不能轉格式，于是百度個不錯的方法在此與大家分享下
    2014-04-04
  • 使用JS獲取input file的路徑C:\fakepath\問題及解決方法

    使用JS獲取input file的路徑C:\fakepath\問題及解決方法

    這篇文章主要介紹了使用JS獲取input file的路徑C:\fakepath\問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • JavaScript獲取瀏覽器窗口尺寸的幾種方法

    JavaScript獲取瀏覽器窗口尺寸的幾種方法

    JavaScript是一種廣泛使用的腳本語言,用于開發(fā)網(wǎng)頁和應用程序,在Web開發(fā)中,經(jīng)常需要獲取瀏覽器窗口的尺寸,以便根據(jù)窗口大小進行布局或執(zhí)行其他操作,本文將介紹如何使用JavaScript來獲取瀏覽器窗口尺寸,需要的朋友可以參考下
    2023-11-11
  • JavaScript?算法實現(xiàn)復寫0雙指針解法

    JavaScript?算法實現(xiàn)復寫0雙指針解法

    這篇文章主要為大家介紹了JavaScript?算法?復寫0雙指針解法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-11-11
  • 原生JS實現(xiàn)無縫輪播圖片

    原生JS實現(xiàn)無縫輪播圖片

    這篇文章主要為大家詳細介紹了原生JS實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06
  • JavaScript二叉搜索樹構建操作詳解

    JavaScript二叉搜索樹構建操作詳解

    這篇文章主要介紹了JavaScript二叉搜索樹構建操作詳解，文章圍繞主題展開二叉搜索樹的性質以及二叉搜索樹的構建、查找和刪除等內容，需要的小伙伴可以參考一下
    2022-07-07
  • 小程序跳轉H5頁面的方法步驟

    小程序跳轉H5頁面的方法步驟

    這篇文章主要介紹了小程序跳轉H5頁面的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03

最新評論