微信小程序自定義漸變的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!