微信小程序自定義頭部返回按鈕及回到首頁樣式

時間 2020-08-13 標籤微信程序自定義頭部返回按鈕回到首頁樣式

原文地址： www.ctoku.com/post/XqArOn…php

在進行小程序開發的過程當中，常常遇到的一個問題就是，經過好友分享打開的小程序，去首頁的入口太深，致使有部分用戶流失，還有對返回按鈕和返回地址進行特殊化處理，須要返回到指定位置，則能夠經過自定義的方式進行處理。html

配置：

經過配置 navigationStyle 對頁面或者全局頁面進行自定義頭部小程序

思路

首先咱們指定自定義頭部確定是以組件的形式存在的；咱們自定義的同時須要保持右邊膠囊位置一致，同時也須要保留頁面標題咱們實現的效果以下圖所示：api

實現

首先咱們經過微信

wx.getMenuButtonBoundingClientRect() 獲取右邊膠囊的位置使用wx.getSystemInfo 獲取系統信息這兩組數據不是常常改變的因此咱們在進入小程序的時候執行放到全局變量裏面。app

this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo({ // iphonex底部適配
	success: res => {
		that.globalData.systeminfo = res
	}
})
複製代碼

根據下圖分析iphone

咱們自定義的圖標和右邊膠囊位置一致所以咱們經過右邊膠囊的位置定位左邊自定義圖標的位置咱們最初獲取到的右邊膠囊位置xss

headerPosi：{
	bottom: 82
	height: 32
	left: 278
	right: 365
	top: 50
	width: 87
}
複製代碼

獲取到的狀態欄高度爲statusH = 44post

因此自定義膠囊距離最頂部的高度爲膠囊距離狀態欄高度 - 狀態欄高度flex

customNav.top = headerPosi.top - statusH wxml部分

<view class="custom_nav" style="height:{{navbarHeight}}px;">
  <view class="custom_nav_box" style="height:{{navbarHeight}}px;">
    <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;">
      <view class="custom_nav_icon"  wx:if="{{!navbarData.has_search}}" style="height:{{navbarBtn.height - 2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius: {{navbarBtn.height / 2}}px">
        <view class="gobank" style="height:{{navbarBtn.height - 10}}px;width:{{navbarBtn.height - 10}}px;"></view>
        <view class="home" style="height:{{navbarBtn.height -10 }}px;width:{{navbarBtn.height - 10}}px;"></view>
      </view>
      <view class="nav_title" wx:if="{{!navbarData.has_search}}" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;">組件目錄</view>
    </view>
  </view>
</view>
複製代碼

wxss部分

.custom_nav {
  width: 100%;
  background: #fff;
}

.custom_nav_box {
  position: fixed;
  width: 100%;
  background: #fff;
}
.custom_nav_bar{
  position: relative;
}
.custom_nav_box .nav_title {
  font-size: 34rpx;
  color: #000;
  text-align: center;
  position: absolute;
  max-width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-weight: 600;
}

.custom_nav_box .custom_nav_icon {
  position: absolute;
  border: .5rpx solid rgba(0, 0, 0, .1);
  border-radius: 50%;
  display: flex;
  padding: 0 10rpx
}
.custom_nav_icon .gobank {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1225467&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
}
.custom_nav_icon .home {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1223065&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
  border-left: 1px solid rgba(0, 0, 0, .1)
}
複製代碼

js部分

const app = getApp();
Component({
  properties: {
    navbarData: { // navbarData 由父頁面傳遞的數據
      type: Object,
      value: {
        gobank: true,
        gohome: true,
        has_search: false,
      },
      observer: function (newVal, oldVal) { 
      }
    }
  },
  data: {
    haveBack: true, // 是否有返回按鈕，true 有 false 沒有 若從分享頁進入則沒有返回按鈕
    statusBarHeight: 0, // 狀態欄高度
    navbarHeight: 0, // 頂部導航欄高度
    navbarBtn: { // 膠囊位置信息
      height: 0,
      width: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    cusnavH: 0,
    searchW: 0, //搜索框寬度
  },
  // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()得到膠囊按鈕高度
  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 狀態欄高度
    let headerPosi = app.globalData.headerBtnPosi // 膠囊位置信息
    console.log(statusBarHeight)
    console.log(headerPosi)
    let btnPosi = { // 膠囊實際位置，座標信息不是左上角原點
      height: headerPosi.height,
      width: headerPosi.width,
      top: headerPosi.top - statusBarHeight, // 膠囊top - 狀態欄高度
      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 膠囊bottom - 膠囊height - 狀態欄height （膠囊實際bottom 爲距離導航欄底部的長度）
      right: app.globalData.systeminfo.screenWidth - headerPosi.right // 屏幕寬度 - 膠囊right
    }
    let haveBack;
    if (getCurrentPages().length === 1) { // 當只有一個頁面時，而且是從分享頁進入
      haveBack = false;
    } else {
      haveBack = true;
    }
    var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 導航高度
    var searchW = app.globalData.systeminfo.screenWidth - headerPosi.width - btnPosi.right * 2 - 30
    console.log(searchW, app.globalData.systeminfo.screenWidth, headerPosi.width)
    this.setData({
      haveBack: haveBack, // 獲取是不是經過分享進入的小程序
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 膠囊bottom + 膠囊實際bottom
      navbarBtn: btnPosi,
      cusnavH: cusnavH,
      searchW: searchW
    })
  },
  methods: {
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    _goHome: function () {
      wx.navigateTo({
        url: '/pages/index/index',
      });
    }
  }
})
複製代碼