微信小程序自定義漸變的tabbar導航欄功能

做為自己的一個小筆記,以免後面再用到

1,在需要自定義的界面的json文件中加入下面代碼 "navigationStyle": "custom" ,隱藏系統導航欄

{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark",
"usingComponents": {
},
"navigationStyle": "custom"
}

2,創建components 文件,為瞭方便復用
js 文件內容:

const app = getApp()
Component({
properties: {
defaultData: {
type: Object,
value: {
title: "默認標題"
},
observer: function (newVal, oldVal) {}
},
topOpacity: {
type: Number,
value: {
topOpacity: 0,
}
}
},
data: {
navBarHeight: app.globalData.navBarHeight,
menuRight: app.globalData.menuRight,
menuTop: app.globalData.menuTop,
menuHeight: app.globalData.menuHeight,
},
attached: function () {
},
methods: {
}
})

wxml文件內容:

<!-- 自定義頂部欄 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
<view class="nav-barback" style="height:{{navBarHeight}}px;opacity:{{topOpacity}}"></view>
<input class="search" placeholder="輸入關鍵詞!" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input>
</view>
<!-- 占位,高度與頂部欄一樣 -->
<view style="height:{{navBarHeight}}px;"></view>

wxss文件內容:

.nav-bar {
position: fixed;
width: 100%;
top: 0;
color: rgb(255, 255, 255);
/* background: rgb(255, 255, 255); */
z-index: 10000;
}
.nav-barback{
background-color: #FFD52F;
width: 100%;
position: relative;
top: 0;
z-index: 10001;
}
.nav-bar .search {
width: 60%;
color: #333;
font-size: 14px;
background: #fff;
position: absolute;
border-radius: 50px;
background: rgb(255, 255, 255);
padding-left: 14px;
z-index: 10002;
}

在需要使用的界面使用方法

1,在json中引入該components,

2,wxml中

<navigationBar default-data="{{defaultData}}" topOpacity="{{topOpacityFloat}}"></navigationBar>

3,js中,這個標題看需求後面可以替換搜索欄

defaultData: {
  title: "我的主頁", // 導航欄標題
},

4,該方法是監聽當前界面滾動的回調,上滑時,自定義的背景色透明度會從0一直到1,達成漸變效果

onPageScroll(t){
let topOpacity = t.scrollTop / 100
console.log('topOpacity',t.scrollTop,topOpacity);
if (t.scrollTop < 10) {
topOpacity = 0
} else if (topOpacity >= 1) {
topOpacity = 1
}
this.setData({
topOpacityFloat: topOpacity
})
},

到此這篇關於微信小程序自定義漸變的tabbar導航欄的文章就介紹到這瞭,更多相關小程序自定義導航欄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: