微信小程序 自定義導航組件 nav頭部 全面屏設計

nav-dynamic

微信小程序自定義nav頭部組件；適配全面屏設計；

實現功能

1. 初始進入頁面時，展現初始狀態下的nav樣式；
2. 頁面滾動時，監聽頁面滾動事件，展現滾動狀態下的nav樣式；
3. 根據配置字段值、頁面棧數量，展現「返回」圖標；
4. 根據配置字段值、頁面棧數量，展現「首頁」圖標，同時配置「首頁路徑」；
5. 設置組件插槽，容許開發者在組件上添加任意元素；

github下載地址（麻煩git給我比個💗，謝謝支持）

https://github.com/minigrasshopper/nav-dynamic

方法說明

• getNavHeight()

獲取導航欄高度；單位px;

• setOptions(options)

設置組件參數；

options Object

參數名稱	類型	默認值	說明	備註
navBackgroundInit	String	'#ffffff'	導航欄背景顏色（初始值）	當nav要設置透明時，可設置成'transparent'
navBackgroundRoll	String	'#000000'	導航欄背景顏色（滾動值）	當nav要設置透明時，可設置成'transparent'
titleColorInit	String	'#ffffff'	文本顏色（初始值）	只能設置成16進制，不可簡寫
titleColorRoll	String	'#000000'	文本顏色（滾動值）	只能設置成16進制，不可簡寫
titleTextInit	String	''	標題文本（初始值）	無
titleTextRoll	String	''	標題文本（滾動值）	無
historyShow	Boolean	true	歷史圖標是否顯示	值爲false，隱藏圖標；值爲true，當頁面棧數量小於2時，隱藏圖標，不然，顯示圖標
scrollMin	Number	50	最小滾動間距	當頁面滾動距離小於scrollMin時；組件的opacity值爲0
scrollMax	Number	200	最大滾動間距	當頁面滾動距離大於scrollMax時；組件的opacity值爲1
homeShow	Boolean	false	home圖標是否顯示	值爲false，隱藏圖標；值爲true，還要設置homeJudgeStack再行判斷
homeJudgeStack	Boolean	true	home圖標顯示是否判斷頁面棧	值爲false，顯示圖標；值爲true，當頁面棧數量小於2時，顯示圖標，不然，隱藏圖標（homeShow值爲true纔有意義）
homePath	String	'/pages/index/index'	home頁面路徑	無
homeColorInit	String	'white'	home圖標顏色（初始值）	white / black
homeColorRoll	String	'black'	home圖標顏色（初始值）	white / black

• scrollHandle(scrollTop)

頁面滾動事件回調；調用這個方法可實現nav組件動態改變樣式

參數名稱	類型	默認值	說明	備註
scrollTop	Number	0	頁面滾動距離	無

插槽用法

插槽名稱

ant-nav-slot

插槽用法

<comp-nav-dynamic id='comp-nav-dynamic'>
  <view slot='ant-nav-slot' style='color: red;'>我是插槽</view>
</comp-nav-dynamic>

 

使用栗子

一、在app.json中全局配置組件

"usingComponents": {
    "comp-nav-dynamic": "/components/nav-dynamic/nav-dynamic"
},

　　

二、在頁面的wxml中引入組件

<comp-nav-dynamic id='comp-nav-dynamic'></comp-nav-dynamic>

　　

三、在頁面的js中使用 this.selectComponent('#comp-nav-dynamic') 方法獲取組件實例，並調用setOptions方法配置參數；而後在頁面的onLoad生命週期中調用；當頁面有滾動修改nav組件樣式需求時，在頁面的onPageScroll的頁面方法中，調用實例的scrollHandle方法；

Page({
  data: {
    navHeight: 0,
  },
  onLoad() {
    this.setNav();
  },
  setNav() {
    this.selectComponent('#comp-nav-dynamic').setOptions({
      navBackgroundInit: '#000000', // 導航欄背景顏色-初始值
      navBackgroundRoll: '#ffffff', // 導航欄背景顏色-滾動值
      titleColorInit: '#ffffff', // 文本顏色-初始值 16進制
      titleColorRoll: '#000000', // 文本顏色-滾動值 16進制
      titleTextInit: '初始標題', // 標題文字-初始值
      titleTextRoll: '滾動標題', // 標題文字-滾動值
      historyShow: true, // 歷史圖標是否顯示
      scrollMin: 50, // 最小滾動間距，單位px
      scrollMax: 200, // 最大滾動間距，單位px
      homeShow: true, // home圖標是否顯示
      homeJudgeStack: false, // home圖標顯示是否判斷頁面棧
      homePath: '/pages/index/index', // home頁面路徑
      homeColorInit: 'white', // home圖標顏色-初始值 white / black
      homeColorRoll: 'black', // home圖標顏色-滾動值 white / black
    })
    this.setData({
      navHeight: this.selectComponent('#comp-nav-dynamic').getNavHeight(),
    })
  },
  onPageScroll(e) {
    this.selectComponent('#comp-nav-dynamic').scrollHandle(e.scrollTop);
  },
})