E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

原文地址: www.ctoku.com/post/XqArOn…在进行小程序开发的过程中,经常遇到的一个问题就是,通过好友分享打开的小程序,去首页的入口太深,导致有部分用户流失,还有对返回按钮和返回地址进行特殊化处理,需要返回到指定位置,则可以通过自定义的方式进行处理。配置:通过配置 navigationStyle 对页面或者全局页面进行自定义头部思路首先我们指定自定义头部肯定是以组件的形式存在的; 我们自定义的同时需要保持右边胶囊位置一致,同时也需要保留页面标题 我们实现的效果如下图所示:实现首先我们通过wx.getMenuButtonBoundingClientRect() 获取右边胶囊的位置 使用wx.getSystemInfo 获取系统信息 这两组数据不是经常改变的所以我们在进入小程序的时候执行放到全局变量里面。this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()wx.getSystemInfo({ // iphonex底部适配success: res = {that.globalData.systeminfo = res}})复制代码根据下图分析我们自定义的图标和右边胶囊位置一致 因此我们通过右边胶囊的位置定位左边自定义图标的位置 我们最初获取到的右边胶囊位置headerPosi:{bottom: 82height: 32left: 278right: 365top: 50width: 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’,      });    }  }})复制代码

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序自定义头部返回按钮及回到首页样式
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏