uniapp使用navigateTo隐藏导航栏返回按钮

在page.json里面设置titleNView下的"autoBackButton":false,这样设置是无效的!

解决方案:

1、app模式下

在navigateTo后的页面onLoad后通过动态的方式隐藏

// #ifdef APP-PLUS
let webView = this.$scope.$getAppWebview();
webView.setStyle({
	titleNView:{
		autoBackButton:false
	}
})
// #endif

必须进行 app环境的判断,不然H5模式下会报错~

2、H5模式下

// #ifdef H5
var webH5 = document.getElementsByClassName('uni-page-head-btn')[0];
webH5.style.display = 'none';
// #endif

重新编译后生效~~

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp使用uView自定义底部导航的步骤如下: 1. 安装uView插件,在HBuilderX中打开项目,右键点击项目根目录,选择"插件安装",搜索uView,安装并重启HBuilderX。 2. 在App.vue文件中引入uView组件库: ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` 3. 在pages.json中配置底部导航,如下所示: ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine_active.png" } ] } } ``` 其中,"tabBar"字段配置底部导航,"list"数组配置每个导航项的属性。 4. 在各个页面中添加导航的内容,如下所示: ```html <template> <view> <view>这是首页</view> </view> </template> <script> export default { data() { return { title: '首页' } }, onNavigationBarButtonTap() { uni.navigateTo({ url: '/pages/search/search' }); } } </script> ``` 其中,"data"中配置页面标题,"onNavigationBarButtonTap"函数配置导航右侧按钮的点击事件。 5. 在App.vue中配置全局导航样式,如下所示: ```scss <style lang="scss"> // 配置全局导航样式 .u-navbar { background-color: #007aff; color: #ffffff; } </style> ``` 6. 运行项目,即可看到自定义的底部导航了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值