微信小程序自定義漸變的tabbar導航欄功能
更新時間：2022年09月14日 09:44:08 作者：平凡的不平凡
這篇文章主要介紹了微信小程序自定義漸變的tabbar導航欄,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
做為自己的一個小筆記，以免后面再用到
1，在需要自定義的界面的json文件中加入下面代碼 "navigationStyle": "custom" ，隱藏系統(tǒng)導航欄
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark",
"usingComponents": {
},
"navigationStyle": "custom"
}2，創(chuàng)建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，該方法是監(jiān)聽當前界面滾動的回調，上滑時，自定義的背景色透明度會從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導航欄的文章就介紹到這了,更多相關小程序自定義導航欄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JS實現添加緩動畫的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS vs TS二分法博弈對比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
下面小編就為大家?guī)硪黄獪\談pc端rem字體設置的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在網上搜索了下關于性能優(yōu)化方面的內容，現簡單整理可供大家在優(yōu)化過程中使用，感興趣的額朋友可以了解下2013-08-08
這篇文章主要給大家介紹了關于微信小程序自定義modal彈窗組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript使用prototype屬性實現繼承操作示例
這篇文章主要介紹了JavaScript使用prototype屬性實現繼承操作,結合實例形式詳細分析了JavaScript使用prototype屬性實現繼承的相關原理、實現方法與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了JS實現懸浮球只在一側滑動 并且是橫屏狀態(tài)下,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
這篇文章主要給大家總結介紹了關于Javascript中Promise的四種常用方法，分別是處理異步回調、多個異步函數同步處理、異步依賴異步回調和封裝統(tǒng)一的入口辦法或者錯誤處理，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了如何用threejs實現實時多邊形折射，對three.js庫感興趣的同學，可以參考下2021-05-05