当前位置: 主页 > 建站知识 > 小程序

小程序tabbar-小程序tabbar页面刷新

发布时间:2023-03-14 11:06   浏览次数:次   作者:佚名

首先我们先看一下具体功能

小程序tabbar页面刷新_小程序tabbar_小程序tabbar图标尺寸

一、修改app.json 文件,将tabBar修改为自定义tab,list 保持不变,最多5个

  1. "tabBar": {
  2. "custom": true,
  3. "list": [{
  4. "pagePath": "pages/main-HY/index",
  5. "text": "货源",
  6. "iconPath": "/images/tabbar/货源icon48*48@2x.png",
  7. "selectedIconPath": "/images/tabbar/货源icon@2x.png"
  8. },
  9. {
  10. "pagePath": "pages/main-SXY/index",
  11. "text": "商学院",
  12. "iconPath": "/images/tabbar/商学院icon@2x.png",
  13. "selectedIconPath": "/images/tabbar/商学院icon48*48@2x.png"
  14. },
  15. {
  16. "pagePath": "pages/main-DZZX/index",
  17. "text": "店主中心",
  18. "iconPath": "/images/tabbar/店主中心icon@2x.png",
  19. "selectedIconPath": "/images/tabbar/店主中心icon48*48@2x.png"
  20. }]
  21. },

小程序tabbar页面刷新_小程序tabbar_小程序tabbar图标尺寸

二、在项目的根目录新建 custom-tab-bar小程序tabbar,这个文件就是微信已经帮我们定义好了,只需要新增文件,就可以微信自动读取

小程序tabbar_小程序tabbar页面刷新_小程序tabbar图标尺寸

小程序tabbar_小程序tabbar图标尺寸_小程序tabbar页面刷新

三、custom-tab-bar/index.wxml 写入,官网中提供,使用cover-view 标签来操作,目前我这边是使用view,因为cover-view 在向上滑动的时候,会带着tab 一起拖上去,不太好看小程序tabbar

  1. {{item.text}}
  2. {{item.text}}

小程序tabbar图标尺寸_小程序tabbar_小程序tabbar页面刷新

四、custom-tab-bar/index.js 写入

  1. // custom-tab-bar/index.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. properties: {
  7. },
  8. /**
  9. * 组件的初始数据
  10. */
  11. data: {
  12. selected: 0,
  13. color: "#7A7E83",
  14. selectedColor: "#FF1C6C",
  15. "list": [{
  16. "pagePath": "/pages/main-HY/index",
  17. "text": "货源",
  18. "iconPath": "/images/tabbar/货源icon48*48@2x.png",
  19. "selectedIconPath": "/images/tabbar/货源icon@2x.png"
  20. },
  21. {
  22. "pagePath": "/pages/main-SXY/index",
  23. "text": "商学院",
  24. "iconPath": "/images/tabbar/商学院icon@2x.png",
  25. "selectedIconPath": "/images/tabbar/商学院icon48*48@2x.png"
  26. },
  27. {
  28. "pagePath": "/pages/main-DZZX/index",
  29. "text": "店主中心",
  30. "iconPath": "/images/tabbar/店主中心icon@2x.png",
  31. "selectedIconPath": "/images/tabbar/店主中心icon48*48@2x.png"
  32. }
  33. ]
  34. },
  35. /**
  36. * 组件的方法列表
  37. */
  38. methods: {
  39. // switchTab(e) {
  40. // const idx = e.currentTarget.dataset.index
  41. // const path = e.currentTarget.dataset.path
  42. // this.setData({
  43. // selected: idx
  44. // })
  45. // if (this.data.selected==0) {
  46. // wx.switchTab({
  47. // url: '/pages/main-HY/index',
  48. // })
  49. // }else if(this.data.selected==1){
  50. // wx.switchTab({
  51. // url: '/pages/main-SXY/index',
  52. // })
  53. // }else{
  54. // wx.switchTab({
  55. // url: '/pages/main-DZZX/index',
  56. // })
  57. // }
  58. // console.log(this.data.selected, idx)
  59. // },
  60. switchTab(e) {
  61. let that = this
  62. const idx = e.currentTarget.dataset.index
  63. const path = e.currentTarget.dataset.path
  64. // 跳转页面
  65. wx.switchTab({
  66. url: path,
  67. })
  68. that.setData({
  69. selected: idx
  70. })
  71. }
  72. }
  73. })

小程序tabbar_小程序tabbar图标尺寸_小程序tabbar页面刷新

五、custom-tab-bar/index.wxss 写入

  1. /* custom-tab-bar/index.wxss */
  2. .tab-bar {
  3. position: fixed;
  4. bottom: 0;
  5. left: 0;
  6. right: 0;
  7. height: 150rpx;
  8. background: white;
  9. display: flex;
  10. padding-bottom: env(safe-area-inset-bottom);
  11. border-radius: 30rpx 30rpx 0 0;
  12. border-top: 1px solid #eaeaea;
  13. z-index: -1;
  14. }
  15. .tab-bar-item {
  16. flex: 1;
  17. text-align: center;
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. flex-direction: column;
  22. }
  23. .tab-bar-item cover-image {
  24. width: 27rpx;
  25. height: 27rpx;
  26. }
  27. .tab-bar-item cover-view {
  28. font-size: 10rpx;
  29. }
  30. .txt{
  31. font-size: 24rpx;
  32. color: #333333;
  33. }
  34. .fontWeight{
  35. font-weight: bold;
  36. }
  37. .bg_rec{
  38. font-size: 24rpx;
  39. color: #FF5224;
  40. }
  41. .center_img{
  42. width: 46rpx;
  43. height: 44rpx;
  44. /* position: fixed; */
  45. transform: translate(-50%);
  46. /* left: 50%; */
  47. }
  48. .center-has-noimg{
  49. bottom: 26rpx;
  50. z-index: 10;
  51. }
  52. .center-has-image{
  53. bottom: 20rpx;
  54. z-index: 11;
  55. }
  56. .transcribe{
  57. width: 750rpx;
  58. height: 288rpx;
  59. background: #FFFFFF;
  60. position:fixed;
  61. bottom: 0;
  62. display: none;
  63. }
  64. .switchover{
  65. background:#fff;
  66. width: 100%;
  67. height: 288rpx;
  68. background: #FFFFFF;
  69. }
  70. /* .switchover{
  71. border: 1rpx solid red;
  72. } */
  73. .switchover-img{
  74. height: 144rpx;
  75. margin-top: 30rpx;
  76. display: flex;
  77. justify-content: space-evenly;
  78. align-items: center;
  79. }
  80. .switchover-icon{
  81. width:124rpx;
  82. height:124rpx;
  83. }
  84. .disagreement{
  85. width:22rpx;
  86. height:22rpx;
  87. }
  88. .disagreement-pris{
  89. text-align: center;
  90. }

小程序tabbar页面刷新_小程序tabbar_小程序tabbar图标尺寸

六、总结踩过的坑

1. 进入首页,点击其他tab,页面会刷新,tabindex 会再次回到首页

解决方案:在每个 switchtab页面 中写入以下 ,( switchtab页面为tabBar 中list 配置的页面)

  1. onShow:function (params) {
  2. if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  3. this.getTabBar().setData({
  4. selected: 0 // 数字是当前页面在tabbar的索引,如我的查询页索引是2,因此这边为2,同理首页就为0,消息中心页面为1
  5. })
  6. }
  7. },