当前位置:   article > 正文

微信小程序原生实现自定义tabBar_自定义tabbar小程序高度px

自定义tabbar小程序高度px

1. 需要在app.json中的tabBar的custom设置成true;

2.  在src下的创建custom-tab-bar文件夹(和pages同级);

3. 在custom-tab-bar文件夹里面的文件编写代码;

  1. // index.wxml
  2. <view class="tab-bar">
  3. <view class="tab-bar-border"></view>
  4. //此处的wx:key也可以使用下标index 官网使用的是下标
  5. <view wx:for="{{list}}" wx:key="item.id" class="tab-bar-item {{item.id === 2 ? 'jumped' : ''}}">
  6. <image src="{{selected === item.id ? item.selectedIconPath : item.iconPath}}" bindtap="switchTab" data-path="{{item.pagePath}}" data-id="{{item.id}}"></image>
  7. <view style="color: {{selected === item.id ? selectedColor : color}}">{{item.text}}</view>
  8. </view>
  9. </view>
  10. //index.js
  11. Component({
  12. data: {
  13. selected: 0,
  14. "list": [{
  15. "id": 0,
  16. "pagePath": "/pages/index/index",
  17. "text": "首页",
  18. "iconPath": "/images/index.png",
  19. "selectedIconPath": "/images/index1.png"
  20. },
  21. {
  22. "id": 1,
  23. "pagePath": "/pages/tools/index",
  24. "text": "工具",
  25. "iconPath": "/images/gongju.png",
  26. "selectedIconPath": "/images/gongju1.png"
  27. },
  28. {
  29. "id": 2,
  30. "pagePath": "/pages/center/index",
  31. "text": "",
  32. "iconPath": "/images/huangtao.png",
  33. "selectedIconPath": "/images/huangtao.png"
  34. },
  35. {
  36. "id": 3,
  37. "pagePath": "/pages/test/index",
  38. "text": "题库",
  39. "iconPath": "/images/xitiku.png",
  40. "selectedIconPath": "/images/xitiku1.png"
  41. },
  42. {
  43. "id": 4,
  44. "pagePath": "/pages/my/index",
  45. "text": "我的",
  46. "iconPath": "/images/user.png",
  47. "selectedIconPath": "/images/user1.png"
  48. }
  49. ]
  50. },
  51. attached() {},
  52. methods: {
  53. switchTab(e) {
  54. console.log('e', e)
  55. const data = e.currentTarget.dataset
  56. const url = data.path
  57. wx.switchTab({
  58. url
  59. })
  60. this.setData({
  61. selected: data.id
  62. })
  63. }
  64. }
  65. })
  66. index.wxss
  67. .tab-bar {
  68. position: fixed;
  69. bottom: 0;
  70. left: 0;
  71. right: 0;
  72. height: 48px;
  73. background: white;
  74. display: flex;
  75. padding-bottom: env(safe-area-inset-bottom);
  76. }
  77. .tab-bar-border {
  78. /* background-color: #FF952C; */
  79. opacity: 0.2;
  80. position: absolute;
  81. left: 0;
  82. top: 0;
  83. width: 100%;
  84. height: 4rpx;
  85. transform: scaleY(0.5);
  86. /* animation: wave infinite linear 1s; */
  87. }
  88. .tab-bar-item {
  89. flex: 1;
  90. text-align: center;
  91. display: flex;
  92. justify-content: center;
  93. align-items: center;
  94. flex-direction: column;
  95. }
  96. .tab-bar-item image {
  97. width: 27px;
  98. height: 27px;
  99. }
  100. .tab-bar-item view {
  101. font-size: 10px;
  102. }

4. 在每个pagePath的文件的index.js的onShow插入以下代码

  1. // 修改selected的值 每个pagePath页面的selected值都是不一样的,具体以需求为准
  2. if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  3. this.getTabBar().setData({
  4. selected: 2
  5. })
  6. }

官网地址:自定义 tabBar | 微信开放文档

自定义tabBar 写法和普通切换tab的写法基本一致,自定义tabBar 是写成了组件的形式

后续自定义tabBar遇到的问题及解决还会更新文档! 敬请期待吧!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/704615
推荐阅读
相关标签
  

闽ICP备14008679号