没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

微信小程序自定义头部返回按钮及回到首页样式


在进行小程序开发的过程中,经常遇到的一个问题就是,通过好友分享打开的小程序,去首页的入口太深,导致有部分用户流失,还有对返回按钮和返回地址进行特殊化处理,需要返回到指定位置,则可以通过自定义的方式进行处理。

配置:

通过配置navigationStyle对页面或者全局页面进行自定义头部

思路

首先我们指定自定义头部肯定是以组件的形式存在的; 我们自定义的同时需要保持右边胶囊位置一致,同时也需要保留页面标题 我们实现的效果如下图所示:
3707134322.png

实现

首先我们通过

wx.getMenuButtonBoundingClientRect()
获取右边胶囊的位置 使用wx.getSystemInfo 获取系统信息 这两组数据不是经常改变的所以我们在进入小程序的时候执行放到全局变量里面。

this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo({ // iphonex底部适配
    success: res => {
        that.globalData.systeminfo = res
    }
})

根据下图分析

85863202.png

我们自定义的图标和右边胶囊位置一致 因此我们通过右边胶囊的位置定位左边自定义图标的位置 我们最初获取到的右边胶囊位置

headerPosi:{
    bottom: 82
    height: 32
    left: 278
    right: 365
    top: 50
    width: 87
}

获取到的状态栏高度为statusH = 44

所以自定义胶囊距离最顶部的高度为 胶囊距离状态栏高度 - 状态栏高度

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',
      });
    }
  }
})

使用方式

在需要自定义的页面引入该组件

navbarData 控制显示及返回按钮等操作

  1. 微信小程序自定义头部返回按钮及回到首页样式 R11; PMCEDAR说道:

    [...]原文地址:https://www.ctoku.com/post/XqArOnnXY0.html[...]

发表评论

电子邮件地址不会被公开。 必填项已用*标注