详解微信小程序胶囊按钮返回|首页自定义导航栏功能_微信胶囊按钮是什么样 - CSDN文库

31 浏览量更新于2023-03-16 评论 1 收藏 86KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解微信小程序胶囊按钮返回详解微信小程序胶囊按钮返回|首页自定义导航栏功能首页自定义导航栏功能

对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏

自己写一个“胶囊按钮”。这篇文章主要介绍了详见微信小程序胶囊按钮返回|首页自定义导航栏,需要的朋友可以

参考下

项目代码：https://github.com/Shay0921/header-navbar.git

在小程序中，从转发出来的小程序消息卡片进入，因为页面栈中只有一个，所以不会出现返回按钮，对于一些电商平台来说，

当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”。如下图所示：

从别的页面点到商品页时会有返回和首页按钮；

当从分享页进入到商品页时，因为页面栈只有一个，所以只有首页按钮；

首先我们需要如何开启自定义导航栏，查看手册后会发现一个页面配置项： navigationStyle

之前的版本此配置项只能在app.js中配置，是全局的属性，而现在可以在单独的页面json中配置，实现单独页面自定义导航

栏。

整体思路整体思路

当使用了 navigationStyle:custom 后，之前的顶部标题栏会被删除，右侧的胶囊按钮则会固定在右上角。然后在当前页面添加了三

个view(状态栏、标题栏、主体内容)，可以看出三块的布局，我直接写死的高度：状态栏20px，标题栏44px。这个是自定义导

航栏的关键，需要去计算这两块的高度，还有返回|首页胶囊按钮的位置。基础库 2.1.0开始可以使用

wx.getMenuButtonBoundingClientRect() 来获得右侧胶囊按钮的位置信息，而有了这个信息，就能相对的算出我们想要在左

侧添加的胶囊按钮的位置。通过 wx.getSystemInfoSync()中的statusBarHeight找到状态栏的高度。

目录结构目录结构

├── components 组件

│ ├── headerNavbar 顶部自定义导航栏

│ │ └── headerNavbar.js

│ │ └── headerNavbar.json

│ │ └── headerNavbar.wxml

│ │ └── headerNavbar.wxss

├── pages 页面

│ ├── index 首页

│ │ └── index.js

│ │ └── index.json

│ │ └── index.wxml

│ │ └── index.wxss

│ ├── navigationStyle 引入自定义导航栏的页面(单独配置了navigationStyle)

│ │ └── navigationStyle.js

│ │ └── navigationStyle.json

│ │ └── navigationStyle.wxml

│ │ └── navigationStyle.wxss

│ │ └── testPage.js 路由测试页面(后面用来测试跳转显示不同胶囊按钮)

│ │ └── testPage.json

│ │ └── testPage.wxml

│ │ └── testPage.wxss

全局变量全局变量

app.js

在app.js中要先获得状态栏高度和右侧胶囊位置信息

App({

onLaunch: function (options) {

// 这里省略掉了登录和获取用户信息等函数

// 因为我在别的页面也需要使用此信息，所以没有单独获得 statusBarHeight

wx.getSystemInfo({ // 获取设备信息

success: (res) => {

this.globalData.systeminfo = res

},

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

评论0

weixin_38649315

粉丝: 6
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈