修改系统tabbar为自定义tabbar

tanghaolin

2022-11-08 c8c3f384040bad0044dcabf72e162e35b5786afa

修改系统tabbar为自定义tabbar

 app.json

@@ -52,7 +52,8 @@
    "reportForm/index/index",
    "reportForm/Detail/index",
    "video/station/index",
    "video/single/index"
    "video/single/index",
    "corpIndex/szjt/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
@@ -70,6 +71,7 @@
    "location"
  ],
  "tabBar": {
    "custom": true,
    "color": "#8E9397",
    "selectedColor": "#16b5cb",
    "backgroundColor": "#ffffff",

 custom-tab-bar/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,47 @@
Component({
  data: {
    selected: 1,
    color: "#8E9397",
    selectedColor: "#16b5cb",
    list: [
        {
          pagePath: "/station/list/index",
          text: "列表",
          iconPath: "/images/tabbar/minitorUnActive.png",
          selectedIconPath: "/images/tabbar/minitorActive.png"
        },
        {
          pagePath: "/workDesktop/index/index",
          text: "工作",
          iconPath: "/images/tabbar/workDesktopUnActive.png",
          selectedIconPath: "/images/tabbar/workDesktopActive.png"
        },
        {
          pagePath: "/map/index",
          text: "地图",
          iconPath: "/images/tabbar/mapUnActive.png",
          selectedIconPath: "/images/tabbar/mapActive.png"
        },
        {
          pagePath: "/mine/index/index",
          text: "我的",
          iconPath: "/images/tabbar/mineUnActive.png",
          selectedIconPath: "/images/tabbar/mineActive.png"
        }
  ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      console.log(e,37)
      const data = e.currentTarget.dataset
      const url = data.path
      this.setData({
        selected: data.index
      })
      console.log(this.data.selected,43)
      wx.switchTab({url})
    }
  }
})

 custom-tab-bar/index.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
{
  "component": true
}

 custom-tab-bar/index.wxml

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

 custom-tab-bar/index.wxss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 54rpx;
  height: 54rpx;
}

.tab-bar-item cover-view {
  font-size: 20rpx;
}

 login/login/index.js

@@ -216,25 +216,6 @@
    wx.switchTab({
      url: '../../workDesktop/index/index',
    })

    // var pages = getCurrentPages();
    // if (pages.length >= 2) {
    //   //var currPage = pages[pages.length - 1];   //当前页面
    //   var prevPage = pages[pages.length - 2]; //返回上一个页面
    //   //console.log(prevPage.route)
    //   if (prevPage) {
    //     var fn = prevPage.refreshUserInfo;
    //     if (typeof fn == "function")
    //       fn();
    //     wx.navigateBack();
    //   } else {
    //     wx.navigateTo({
    //       url: "/workDestop/index/index"
    //     });
    //   }
    // } else {
    //   wx.navigateBack();
    // }
  },
  //点击真实用户登录按钮
  tapBindUserReal: function (e) {

 map/index.js

@@ -90,8 +90,6 @@
    ]
  },
  onLoad: function (options) {
    // console.log(wx.getSystemInfoSync())
    // console.log(wx.getSystemInfoSync().windowHeight * 0.2 * -1 - 10)
    var userInfo = app.globalData.userInfo;
    // console.log(userInfo)
    if (userInfo) {
@@ -111,6 +109,14 @@
    // this.getRepairFormList();
  },
  onReady: function () {},
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2
      })
    }
  },
  //展示所有marker标点的视野  
  setIncludePoints() {
    var MapContext = wx.createMapContext('detailMap');

 map/index.wxml

@@ -66,7 +66,7 @@
        <view wx:else="{{markerTipInfo.markerInfo.Records.length==0}}" class="zanWuShuju">
          æš‚无监控数据
        </view>
        <view wx:if="{{link_box}}" class="block_list_url">
        <view wx:if="{{link_box}}" class="block_list_url" >
          <view bindtap="tapOpenStationMonitorPageInList" data-stationid="{{markerTipInfo.markerInfo.ObjectID}}"
            data-stationname="{{markerTipInfo.markerInfo.ObjectName}}">
            <icon class="iconfont icon-jiankong"></icon> <span style="padding-left:10px;padding-right:10px;">监控</span>
@@ -265,7 +265,7 @@
    </movable-view>
  </movable-area> -->

  <view class="drawerBox" style="bottom:{{drawerMenuMoveData.bottom}}rpx" bindtouchstart="drawerTouchStart"
  <view wx:if="{{false}}" class="drawerBox" style="bottom:{{drawerMenuMoveData.bottom}}rpx" bindtouchstart="drawerTouchStart"
    bindtouchend="drawerTouchEnd" bindtouchmove="drawerTouchMove">
    <view class="cu-card case no-card shadow drawerBody" style="height:{{drawerMenuMoveData.height}}rpx;">
      <view style="width: 100%;display: flex;justify-content: center;align-items: center;">

 map/index.wxss

@@ -714,5 +714,20 @@
    top: 0;
    width: 100%;
    opacity: 0.5;
}

.cu-modal.bottom-modal.show {
    margin-bottom: 155rpx;
}
.cu-modal.bottom-modal {
    margin-bottom: -1000rpx;
}
.cu-modal.show {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
}

 mine/index/index.js

@@ -29,6 +29,12 @@
        userInfo: userInfo
      });
    }
    if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 3
    })
  }
  },
  openSetting: function () {
    wx.openSetting({

 monitor/station/index.js

@@ -284,6 +284,9 @@
  },
  //获取泵站运行时间
  getWorkTime: function () {
    wx.showLoading({
      title: '正在获取开机时间',
    })
    var that = this;
    var machineList = this.data.machineList;
    var userInfo = app.globalData.userInfo;
@@ -299,7 +302,8 @@
        'content-type': 'application/json'
      },
      success(res) {
        // console.log(res,306)
        wx.hideLoading()
         console.log(res,306)
        var result = res.data
        if (result.Code != 0) {
          return;

 station/list/index.js

@@ -46,6 +46,14 @@
    this.initialStationTree();
    return;
  },
  onShow(){
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },
  onShareAppMessage: function () {
    return Constant.Share;
  },

 utils/constant.js

@@ -28,8 +28,8 @@
    Login: {
      DemoUserID: 11,
      DemoEmployeeID: 11,
      LogoUrl: "http://demo.beng35.com/assets/miniProgram/LoginLogo.png",
      BackgroupImageUrl: "http://demo.beng35.com/assets/miniProgram/LoginBackground.png"
      LogoUrl: "http://demo.beng35.com/assets/miniProgram/LoginLogo.png?v=11",
      BackgroupImageUrl: "http://demo.beng35.com/assets/miniProgram/LoginBackground.png?v=22"
    }
  },
}

 workDesktop/index/index.js

@@ -173,7 +173,14 @@
  onShareAppMessage: function () {
    return Constant.Share;
  },
  onShow: function () {},
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 1
    })
  }
  },
  onReady: function () {},
  onHide: function () {}
})