uni-app微信小程序,在页面顶部添加返回按键,返回上一个页面

1.示例:
在这里插入图片描述
2.实现方式:
在page.json文件中的style里添加如下代码:

{
    "path": "pages/noteDisplay/index",
    "style": {
      "navigationBarTitleText": "畅所欲言",
	  "app-plus": {
	            "bounce": "none", //关闭窗口回弹效果
	            "titleNView": {
	                "buttons": [ //原生标题栏按钮配置,
	                    {
	             		    "type":"none",
	             		    "text":"\u2713",
	             		    "float":"right"
	                    }
	                 ]
	             }
	         }
    }
  }

3.tips:
在page.json中的页面顺序就是小程序加载过程中的页面顺序

### 微信小程序右上角胶囊样式的修改 微信小程序中的右上角胶囊按钮是由系统控制的导航栏的一部分,其默认样式无法通过普通的 CSS 或者 JavaScript 完全自定义。然而,可以通过一些间接方法来调整与该胶囊按钮相关的布局。 #### 1. 获取状态栏高度和导航栏高度 为了合理安排页面顶部的内容布局,可以先获取设备的状态栏高度以及导航栏的高度。这部分逻辑可以在 `onLoad` 生命周期函数中完成: ```javascript Page({ data: { statusHeight: 0, navHeight: 0 }, onLoad() { const sysinfo = uni.getSystemInfoSync(); const statusHeight = sysinfo.statusBarHeight; const isiOS = sysinfo.system.indexOf('iOS') > -1; let navHeight = isiOS ? 44 : 48; this.setData({ statusHeight, navHeight }); } }); ``` 上述代码片段用于动态计算状态栏和导航栏的高度[^3]。 #### 2. 设置页面顶部容器的 padding 由于右上角胶囊按钮的位置固定在屏幕右侧边缘附近,因此可以通过为页面顶部的主要内容区域设置合适的 `padding-right` 来避免内容与其重叠。例如,在 WXML 文件中定义一个顶层容器,并为其应用特定的样式: ```html <view class="top-container"> <!-- 页面其他内容 --> </view> ``` 对应的 WXSS 样式如下所示: ```css .top-container { padding-top: calc(var(--status-bar-height) + 50px); /* 状态栏高度加上导航栏高度 */ padding-right: 100rpx; /* 调整此值以改变与胶囊的距离 */ } ``` 这里使用了 `calc()` 函数结合变量 `--status-bar-height` 和固定的数值(如 `50px`),从而确保即使不同机型具有不同的状态栏高度也能适配良好。同时设置了较大的 `padding-right` 值作为示例,实际项目可根据需求微调这个距离。 #### 3. 使用 custom-tab-bar 替代原生导航栏 如果希望完全掌控右上角区域的设计,则可以选择隐藏掉系统的导航栏并实现自己的定制化 tab bar 组件。具体操作是在 app.json 中关闭默认导航栏显示: ```json { "window": { "navigationStyle": "custom" } } ``` 之后自行绘制包含返回键、标题以及其他功能按键的新头部结构即可[^1]。 --- ### 注意事项 尽管能够通过以上方式影响到右上角胶囊附近的视觉效果,但直接更改胶囊本身的外观仍然受限于平台政策规定。对于大多数应用场景而言,推荐遵循官方设计指南来进行界面优化而不是强行改造内置控件的行为模式[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值