uview自定义导航栏(自定义返回路径)

傷城~ 2021-09-07 06:16 4232阅读 3赞

依赖包:uview框架配置

自定义导航栏
1.pages.json页面关闭原生的导航栏

  1. {
  2. // 待办事项
  3. "path" : "pages/home/backlog/backlog/backlog",
  4. "style" :
  5. {
  6. "navigationStyle" : "custom" //关闭自带的导航栏
  7. }

2.源码

  1. <!-- 选项卡 待办事项 -->
  2. <template>
  3. <view>
  4. <!-- 自定义导航 -->
  5. <!--自定义返回的路径:custom-back="gotabpolice" -->
  6. <u-navbar title-color="#fff" back-icon-color="#fff" :is-fixed="isFixed" :is-back="true" :background="background" :title="title" :back-icon-name="backIconName" :back-text="backText" :custom-back="gotabpolice" >
  7. <view class="navbar-right" slot="right" v-if="slotRight">
  8. <view style="margin:5px 12px 0 0 ">
  9. <image style="width:18.25px;height: 17.75px;" src="../../../../static/img/admin/search.png" mode="">
  10. </image>
  11. </view>
  12. </view>
  13. </u-navbar>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. // 自定义导航栏
  21. title: '待办事项',
  22. slotRight: true,
  23. backText: '',
  24. backIconName: 'nav-back',
  25. right: false,
  26. showAction: false,
  27. rightSlot: false,
  28. useSlot: false,
  29. background: {
  30. background: '#2E95FF'
  31. },
  32. isBack: true,
  33. search: false,
  34. custom: false,
  35. isFixed: true,
  36. keyword: '',
  37. // #ifdef MP
  38. slotRight: false,
  39. // #endif
  40. // #ifndef MP
  41. slotRight: true,
  42. // #endif
  43. //自定义导航栏结束
  44. }
  45. },
  46. methods: {
  47. gotabpolice(){
  48. uni.switchTab({
  49. url:'../../tabbar/tab-police/tab-police'
  50. })
  51. }
  52. }
  53. }
  54. </script>
  55. <style>
  56. </style>

发表评论

表情:
评论列表 (有 0 条评论,4232人围观)

还没有评论,来说两句吧...

相关阅读

    相关 uni-app定义导航

    由于之前的代码失效了现在更新一下!!! 由于我的开发环境是uni-app所以一下代码是uni-app的开发代码,不过小程序也是同理的,本人在我的原生小程序页同样实现了 参