Небольшая настраиваемая панель навигации программы, совместимая со всеми моделями (с полным корпусом)

Апплет WeChat
Небольшая настраиваемая панель навигации программы, совместимая со всеми моделями (с полным корпусом)

предисловие

В большинстве случаев мы используем официальный WeChatnavigationBarнастроить, но иногда нам нужно интегрировать окно поиска, пользовательское фоновое изображение, кнопку «Назад к дому» и т. д. в панель навигации.

идеи

  • Скрыть официальную панель навигации

  • Получить кнопку капсулы, данные, связанные со строкой состояния, для последующего расчета

  • Рассчитать высоту панели навигации в соответствии с различными моделями

  • Написать новую панель навигации

  • Ссылка на страницу Пользовательская навигация

текст

Скрыть официальную панель навигации

Скрытую панель навигации можно настроить глобально или на отдельной странице, в зависимости от потребностей бизнеса.

глобальное скрытие

//app.json
"window": {
   "navigationStyle": "custom"
}

скрыть страницу

//page.json
{
  "navigationStyle": "custom"
}

Получить кнопку капсулы, данные, связанные со строкой состояния, для последующего расчета

Формула: Высота панели навигации = расстояние от строки состояния до капсулы (расстояние капсулы от верхней границы - высота строки состояния) * 2 + высота капсулы + высота строки состояния. Из формулы нужно получить状态栏高度 胶囊高度 胶囊距上距离

Примечание: расстояние от строки состояния до капсулы = расстояние от капсулы до нижней границы. Так что здесь вам нужно * 2

Высота строки состояния

использоватьwx.getSystemInfoSync()Официальный APIИнформация, относящаяся к системе, может быть получена,statusBarHeightСвойство может получить высоту строки состояния

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;

Высота капсулы и расстояние от верхней границы капсулы

использоватьwx.getMenuButtonBoundingClientRect()Официальный APIМожно получить информацию о положении макета кнопки капсулы кнопки меню.

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//胶囊相关信息
const menuButtonHeight = menuButtonInfo.height //胶囊高度
const menuButtonTop = menuButtonInfo.top//胶囊距上边界距离

Пример

В общем, нам нужно вычислить соответствующие данные, то есть входной файл, при использовании хука жизненного цикла инициализации запуска.app.jsизonLaunchкрючки жизненного цикла

//app.js
App({
  onLaunch: function () {
    this.setNavBarInfo()
  },
  
  globalData: {
    //全局数据管理
    navBarHeight: 0, // 导航栏高度
    menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  },

  /**
   * @description 设置导航栏信息
   */
  setNavBarInfo () {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    this.globalData.menuHeight = menuButtonInfo.height;
  }
})

Ссылка на страницу Пользовательская навигация

//page.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
  <!-- 胶囊区域 -->
  <view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
    <view class="nav-handle">
      <image class="nav-back-icon" src="/images/nav_back.png" bind:tap="navToBackLastPage"></image>
      <image class="nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image>
    </view>
    <view class="nav-title">导航标题</view>
  </view>
</view>

// page.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight,//导航栏高度
    menuBotton: app.globalData.menuBotton,//导航栏距离顶部距离
    menuHeight: app.globalData.menuHeight //导航栏高度
  }

расфасован по компонентам

Мы можем добиться различных эффектов на наших соответствующих страницах, таких как добавление на панель навигации окна поиска, даты и т. д. В настоящее время мы можем инкапсулировать пользовательский компонент, чтобы значительно повысить эффективность нашей разработки.

новый компонент

// components/navigation/index.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
  <view class="nav-main">
    <!-- 胶囊区域 -->
    <view 
      class="capsule-box" 
      style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
    >
    <!-- 导航内容区域 -->
      <slot></slot>
    </view>
  </view>
</view>

// components/navigation/index.wxss
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
.nav-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.nav .capsule-box {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
}


// components/navigation/index.js
const app = getApp()
Component({
  /**
   * 组件的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight, //导航栏高度
    menuRight: app.globalData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
    menuBotton: app.globalData.menuBotton,
    menuHeight: app.globalData.menuHeight
  }
})

ссылка на страницу

Конфигурация страницы представляет пользовательский компонент

//index.json
{
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "navigation": "/components/Navigation/index"
  }
}

используется на странице

<!-- 自定义导航 -->
<navigation>
  <view class="current-date">
     <text>4月24日</text>
  </view>
</navigation>

Суммировать

В этой статье в основном рассказывается об основах пользовательской навигации с упором на то, как рассчитать пользовательскую навигацию. Конкретный бизнес и стиль также должны быть установлены в соответствии с их собственными продуктами. Если у вас есть какие-либо вопросы, добро пожаловать, чтобы спросить, чтобы учиться вместе.

Категории