关于NavigationBar的返回按钮

The navigation controller checks the following things when a new view controller is pushed:


1. If the new top-level view controller has a custom left bar button item, that item is displayed. To specify a custom left bar button item, set the leftBarButtonItem property of the view controller’s navigation item.


2. If the top-level view controller does not have a custom left bar button item, but the navigation item of the previous view controller has a valid item in its backBarButtonItem property, the navigation bar displays that item.


3. If a custom bar button item is not specified by either of the view controllers, a default back button is used and its title is set to the value of the title property of the previous view controller—that is, the view controller one level down on the stack. (If there is only one view controller on the navigation stack, no back button is displayed.)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是uniapp自定义左上角返回按钮的方法: 1.在App.vue中添加以下代码: ```vue <template> <view> <navigation-bar :title="title" :left-text="leftText" :background-color="backgroundColor" :fixed="fixed" @click-left="onClickLeft"></navigation-bar> <router-view></router-view> </view> </template> <script> export default { data() { return { title: 'uni-app', leftText: '返回', backgroundColor: '#ffffff', fixed: true } }, methods: { onClickLeft() { uni.navigateBack({ delta: 1 }) } } } </script> ``` 2.在需要使用自定义返回按钮的页面中,将navigationBarTitleText改为false,并在navigationBar中添加自定义返回按钮的样式: ```vue <template> <view> <navigation-bar :title="title" :background-color="backgroundColor" :fixed="fixed" :back-text="backText" :delta="delta" @click-left="onClickLeft" left-icon="back"></navigation-bar> <text>这是一个需要自定义返回按钮的页面</text> </view> </template> <script> export default { data() { return { title: 'uni-app', backgroundColor: '#ffffff', fixed: true, backText: '', delta: 1 } }, methods: { onClickLeft() { uni.navigateBack({ delta: this.delta }) } } } </script> <style> /* 自定义返回按钮样式 */ .uni-icon.back:before { content: "\e6b4"; font-size: 24px; color: #000000; } </style> ``` 在这个例子中,我们使用了uni-app提供的navigationBar组件,并在App.vue中定义了默认的navigationBar样式和点击左侧按钮的方法。在需要自定义返回按钮的页面中,我们将navigationBarTitleText改为false,并在navigationBar中添加了自定义返回按钮的样式。同时,我们还定义了点击左侧按钮的方法,使其返回上一页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值