描述:底部tabbar

miniprogram/app.json

@@ -69,10 +69,9 @@
       },
       {
         "pagePath": "pages/parkRepair/parkRepair",
-        "iconPath": "/images/icon/wodebaoxiu1.png",
-        "selectedIconPath": "/images/icon/wodebaoxiu.png",
-        "text": "维修",
-        "isSpecial" : true
+        "iconPath": "/images/tabbar/openDoor.png",
+        "selectedIconPath": "/images/tabbar/openDoor.png",
+        "text": "开门"
       },
       {
         "pagePath": "pages/my/my",
@@ -83,6 +82,7 @@
     ]
   },
   "usingComponents": {},
+   
 
   "sitemapLocation": "sitemap.json",
   "permission": {

miniprogram/pages/index/index.js

@@ -1,195 +1,226 @@
 const app = getApp()
 Page({
-  onShareAppMessage(res) {},
-  data: {
-    IMG_NAME: app.IMG_NAME,
-    indicatorDots: true,
-    autoplay: true,
-    interval: 3000,
-    duration: 1000,
-    bannerList: [{
-        bannerImg: ''
-      }
-    ],
-    list: [{
-        name: "创业活动",
-        img: "/images/hicon/chuangyehuodong.png",
-        path: "/pages/community/community"
-      },
-      {
-        name: "政策信息",
-        img: "/images/hicon/zhengcexinxi.png",
-        path: "/pages/notice/notice"
-      },
-      {
-        name: "党建园地",
-        img: "/images/hicon/zhaozhengce.png",
-        //img: "/images/hicon/yuanqugonggao.png",
-        path: "/pages/party/party"
-      },
-      {
-        name: "租办公室",
-        img: "/images/hicon/zubangongshi.png",
-        path: "/pages/office/office"
-      },
-      {
-        name: "项目入孵",
-        img: "/images/hicon/xiangmurufu.png",
-        path: "/pages/applyType/applyType"
-      },
-      {
-        name: "企业入驻",
-        img: "/images/hicon/qiyeruzhu.png",
-        path: "/pages/applyType/applyType"
-      },
-      {
-        name: "厂房申请",
-        img: "/images/hicon/qianrushenqing.png",
-        path: "/pages/applyType/applyType"
-      },
-      {
-        name: "园区建议",
-        img: "/images/hicon/yuanqujianyi.png",
-        path: "/pages/complaint/complaint"
-      },
-      {
-        name: "商业计划书",
-        img: "/images/hicon/wenjuandiaocha.png",
-        path: "/pages/outer/outer"
-      },
-      /*
-      {
-        name: "园区报修",
-        img: "/images/hicon/zhaozhuanli.png",
-        path: "/pages/parkRepair/parkRepair"
-      },      
-      */
-    ],
-    homelist: [],
-    background: [{
-      bg: '/profile/banner/1.jpg',
-      url: ''
-    }, {
-      bg: '/profile/banner/2.jpg',
-      url: ''
-    }, {
-      bg: '/profile/banner/3.jpg',
-      url: ''
-    }, {
-      bg: '/profile/banner/4.jpg',
-      url: ''
-    }, {
-      bg: '/profile/banner/5.jpg',
-      url: ''
-    }, {
-      bg: '/profile/banner/6.jpg',
-      url: ''
-    }]
-  },
+    onShareAppMessage(res) {},
+    data: {
+        // tabBar param
+        tabBarParam: {
+            selected: 0,
+            color: "#515151",
+            selectedColor: "#217CFF",
+            backgroundColor: "#ffffff",
+        },
+        // tabBar menu
+        tabBarList: [{
+                "pagePath": "pages/index/index",
+                "iconPath": "/images/tabbar/home.png",
+                "selectedIconPath": "/images/tabbar/home-select.png",
+                "text": "首页"
+            },
+            {
+                "pagePath": "pages/parkRepair/parkRepair",
+                "iconPath": "/images/tabbar/openDoor.png",
+                "selectedIconPath": "/images/tabbar/openDoor.png",
+                "text": "开门",
+                "bulge": true,
+            },
+            {
+                "pagePath": "pages/my/my",
+                "iconPath": "/images/tabbar/my.png",
+                "selectedIconPath": "/images/tabbar/my-select.png",
+                "text": "我的"
+            },
+        ],
 
-  onShow() {
-    let that = this
-    if (wx.getStorageSync('token')) {
-      app.AjaxRequest('get', {
-        'content-type': 'application/json',
-        'Authorization': 'Bearer ' + app.Getopenid()
-      }, '/user/profile', {}, function (res) {
-        if (res.code == 0) {
-          that.setData({
-            parkName: wx.getStorageSync('parkName')
-          })
-          wx.setStorageSync('MemberInfo', res.data)
-          that.getHotList()
-        }
-      })
-    } else {
-      wx.reLaunch({
-        url: '/pages/login/login',
-      })
-    }
-  },
+        IMG_NAME: app.IMG_NAME,
+        indicatorDots: true,
+        autoplay: true,
+        interval: 3000,
+        duration: 1000,
+        bannerList: [{
+            bannerImg: ''
+        }],
+        menuList: [{
+                name: "创业活动",
+                img: "/images/hicon/chuangyehuodong.png",
+                path: "/pages/community/community"
+            },
+            {
+                name: "政策信息",
+                img: "/images/hicon/zhengcexinxi.png",
+                path: "/pages/notice/notice"
+            },
+            {
+                name: "党建园地",
+                img: "/images/hicon/zhaozhengce.png",
+                //img: "/images/hicon/yuanqugonggao.png",
+                path: "/pages/party/party"
+            },
+            {
+                name: "租办公室",
+                img: "/images/hicon/zubangongshi.png",
+                path: "/pages/office/office"
+            },
+            {
+                name: "项目入孵",
+                img: "/images/hicon/xiangmurufu.png",
+                path: "/pages/applyType/applyType"
+            },
+            {
+                name: "企业入驻",
+                img: "/images/hicon/qiyeruzhu.png",
+                path: "/pages/applyType/applyType"
+            },
+            {
+                name: "厂房申请",
+                img: "/images/hicon/qianrushenqing.png",
+                path: "/pages/applyType/applyType"
+            },
+            {
+                name: "园区建议",
+                img: "/images/hicon/yuanqujianyi.png",
+                path: "/pages/complaint/complaint"
+            },
+            {
+                name: "商业计划书",
+                img: "/images/hicon/wenjuandiaocha.png",
+                path: "/pages/outer/outer"
+            },
+            /*
+            {
+              name: "园区报修",
+              img: "/images/hicon/zhaozhuanli.png",
+              path: "/pages/parkRepair/parkRepair"
+            },      
+            */
+            {
+                name: "会议预约",
+                img: "/profile/static/index/menu-hyyy.png",
+                path: ""
+            },
+        ],
+        homelist: [],
+        background: [{
+            bg: '/profile/banner/1.jpg',
+            url: ''
+        }, {
+            bg: '/profile/banner/2.jpg',
+            url: ''
+        }]
+    },
 
-  //轮播高度自适应——获取图片高度
-  imgHeight: function (e) {
-    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
-    var imgh = e.detail.height; //图片高度
-    var imgw = e.detail.width; //图片宽度
-    var swiperH = winWid * imgh / imgw + "px"
-    this.setData({
-      Height: swiperH //设置高度
-    })
-    // this.setData({
-    //   Height: '300rpx' //设置高度
-    // })
-  },
-
-  getHotList() {
-    let that = this
-    app.AjaxRequest('get', {
-      'content-type': 'application/json',
-      'Authorization': 'Bearer ' + app.Getopenid()
-    }, '/menu/bannerList', {
-      isTop: true
-    }, function (res) {
-      that.setData({
-        homelist: res.data
-      })
-    })
-  },
-
-  navdateil(e) {
-    var index = e.currentTarget.dataset.index
-    wx.navigateTo({
-      url: '/pages/detail/detail?list=' + index
-    })
-  },
-
-  navapply(e) {
-    if (wx.getStorageSync('token')) {
-      if (e.currentTarget.dataset.path) {
-        if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') {
-          wx.switchTab({
-            url: e.currentTarget.dataset.path,
-          })
-        } else {
-          wx.navigateTo({
-            url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name,
-          })
-        }
-      } else {
-        wx.showModal({
-          content: '模块暂未开放，敬请期待',
-          showCancel: false,
+    // 切换tabbar
+    switchTab(e) {
+        const data = e.currentTarget.dataset
+        console.log('switchTab', data)
+        const url = data.path
+        wx.switchTab({
+            url: '/' + url
         })
-      }
-    } else {
-      app.getlogin()
+    },
+
+    onShow() {
+        let that = this
+        if (wx.getStorageSync('token')) {
+            app.AjaxRequest('get', {
+                'content-type': 'application/json',
+                'Authorization': 'Bearer ' + app.Getopenid()
+            }, '/user/profile', {}, function (res) {
+                if (res.code == 0) {
+                    that.setData({
+                        parkName: wx.getStorageSync('parkName')
+                    })
+                    wx.setStorageSync('MemberInfo', res.data)
+                    that.getHotList()
+                }
+            })
+        } else {
+            wx.reLaunch({
+                url: '/pages/login/login',
+            })
+        }
+    },
+
+    //轮播高度自适应——获取图片高度
+    imgHeight: function (e) {
+        var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
+        var imgh = e.detail.height; //图片高度
+        var imgw = e.detail.width; //图片宽度
+        var swiperH = winWid * imgh / imgw + "px"
+        this.setData({
+            Height: swiperH //设置高度
+        })
+        // this.setData({
+        //   Height: '300rpx' //设置高度
+        // })
+    },
+
+    getHotList() {
+        let that = this
+        app.AjaxRequest('get', {
+            'content-type': 'application/json',
+            'Authorization': 'Bearer ' + app.Getopenid()
+        }, '/menu/bannerList', {
+            isTop: true
+        }, function (res) {
+            that.setData({
+                homelist: res.data
+            })
+        })
+    },
+
+    navdateil(e) {
+        var index = e.currentTarget.dataset.index
+        wx.navigateTo({
+            url: '/pages/detail/detail?list=' + index
+        })
+    },
+
+    navapply(e) {
+        if (wx.getStorageSync('token')) {
+            if (e.currentTarget.dataset.path) {
+                if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') {
+                    wx.switchTab({
+                        url: e.currentTarget.dataset.path,
+                    })
+                } else {
+                    wx.navigateTo({
+                        url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name,
+                    })
+                }
+            } else {
+                wx.showModal({
+                    content: '模块暂未开放，敬请期待',
+                    showCancel: false,
+                })
+            }
+        } else {
+            app.getlogin()
+        }
+    },
+
+    navDetail(e) {
+        if (wx.getStorageSync('token')) {
+            wx.navigateTo({
+                url: e.currentTarget.dataset.uri,
+            })
+        } else {
+            app.getlogin()
+        }
+    },
+
+    navparkList() {
+        wx.navigateTo({
+            url: '/pages/index/parkList/parkList'
+        })
+    },
+
+    adLoad() {
+        console.log('Banner 广告加载成功')
+    },
+    adError(err) {
+        console.log('Banner 广告加载失败', err)
+    },
+    adClose() {
+        console.log('Banner 广告关闭')
     }
-  },
-
-  navDetail(e) {
-    if (wx.getStorageSync('token')) {
-      wx.navigateTo({
-        url: e.currentTarget.dataset.uri,
-      })
-    } else {
-      app.getlogin()
-    }
-  },
-
-  navparkList() {
-    wx.navigateTo({
-      url: '/pages/index/parkList/parkList'
-    })
-  },
-
-  adLoad() {
-    console.log('Banner 广告加载成功')
-  },
-  adError(err) {
-    console.log('Banner 广告加载失败', err)
-  },
-  adClose() {
-    console.log('Banner 广告关闭')
-  }
 })

miniprogram/pages/index/index.wxml

@@ -1,27 +1,34 @@
 <view class="page">
-  <scroll-view style="height:100%;" scroll-y="true">
-    <view bindtap="navparkList" class="topList">
-      <text style="font-size: 28rpx;">当前园区：{{parkName? parkName:'请先选择园区'}}</text>
-      <text style="color: #939393;font-size: 36rpx;"> > </text>
+    <scroll-view style="height:100%;" scroll-y="true">
+        <view bindtap="navparkList" class="topList">
+            <text style="font-size: 28rpx;">当前园区：{{parkName? parkName:'请先选择园区'}}</text>
+            <text style="color: #939393;font-size: 36rpx;"> > </text>
+        </view>
+        <swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='true' style='height:{{Height}}' wx:if="{{background.length > 0}}">
+            <block wx:for="{{background}}" wx:key="index">
+                <swiper-item>
+                    <image src="{{IMG_NAME + item.bg}}" mode="widthFix" style="width:100%" bindload='imgHeight'></image>
+                </swiper-item>
+            </block>
+        </swiper>
+
+        <view style="font-size: 12pt;background: white;padding: 20rpx 30rpx;">我的应用</view>
+        <view class="fixed">
+            <view class="fixedbox" wx:for='{{menuList}}' wx:key='index' data-path="{{item.path}}" data-name="{{item.name}}" bindtap="navapply">
+                <image class="menuImg" src="{{IMG_NAME + item.img}}"></image>
+                <view style="font-size:26rpx;margin-top:18rpx;">{{item.name}}</view>
+            </view>
+        </view>
+
+
+    </scroll-view>
+
+    <!-- tabBar -->
+    <view class="tab-bar">
+        <view wx:for="{{tabBarList}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+            <view wx:if="item.bulge" class="tab-bar-bulge"></view>
+            <image class="image" src="{{tabBarParam.selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+            <view class="tab-bar-view" style="color: {{tabBarParam.selected === index ? tabBarParam.selectedColor : tabBarParam.color}}">{{item.text}}</view>
+        </view>
     </view>
-    <swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
-      duration="{{duration}}" circular='true' style='height:{{Height}}' wx:if="{{background.length > 0}}">
-      <block wx:for="{{background}}" wx:key="index">
-        <swiper-item>
-          <image src="{{IMG_NAME + item.bg}}" mode="widthFix" style="width:100%" bindload='imgHeight'></image>
-        </swiper-item>
-      </block>
-    </swiper>
-    
-    <view style="font-size: 12pt;background: white;padding: 20rpx 30rpx;">我的应用</view>
-    <view class="fixed">
-      <view class="fixedbox" wx:for='{{list}}' wx:key='index' data-path="{{item.path}}" data-name="{{item.name}}"
-        bindtap="navapply">
-        <image class="{{item.gray? 'gray':''}}" src="{{item.img}}" style="width:90rpx;height:90rpx;"></image>
-        <view style="font-size:26rpx;margin-top:18rpx;">{{item.name}}</view>
-      </view>
-    </view>
-   
-    
-  </scroll-view>
 </view>

miniprogram/pages/index/index.wxss

@@ -1,125 +1,133 @@
 @import "../../app.wxss";
+@import "../../tabBar.wxss";
 
 page {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 
 
 .topList {
-  width: 100%;
-  height: 70rpx;
-  line-height: 70rpx;
-  background: white;
-  padding: 0 20rpx;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999999;
+    display: none;
+    width: 100%;
+    height: 70rpx;
+    line-height: 70rpx;
+    background: white;
+    padding: 0 20rpx;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999999;
 }
 
-.swiper-box{
-  margin-top: 70rpx;
+.swiper-box {
+    margin-top: 70rpx;
 }
 
 .page {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  color: black;
-  overflow: auto;
-  border-top: 1rpx solid #f4f4f4;
-  background-color: #F5F5F5;
-  /* padding: 0 26rpx; */
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color: black;
+    overflow: auto;
+    border-top: 1rpx solid #f4f4f4;
+    background-color: #F5F5F5;
+    /* padding: 0 26rpx; */
 }
 
 .activityList {
-  background: white;
-  margin-bottom: 20rpx;
-  /* border-radius: 24rpx; */
-  overflow: hidden;
-  border-bottom: 1rpx solid #EEEEEE;
+    background: white;
+    margin-bottom: 20rpx;
+    /* border-radius: 24rpx; */
+    overflow: hidden;
+    border-bottom: 1rpx solid #EEEEEE;
 }
 
 .detailbox {
-  padding: 16rpx 26rpx;
-  line-height: 40rpx;
-  position: relative;
+    padding: 16rpx 26rpx;
+    line-height: 40rpx;
+    position: relative;
 }
 
 .fixed {
-  background: white;
-  padding: 0 30rpx 40rpx 30rpx;
-  display: flex;
-  flex-wrap: wrap;
-  /* border-radius: 20rpx; */
-  margin-bottom: 40rpx;
+    background: white;
+    padding: 0 30rpx 40rpx 30rpx;
+    display: flex;
+    flex-wrap: wrap;
+    /* border-radius: 20rpx; */
+    margin-bottom: 40rpx;
 }
 
 .fixedbox {
-  width: 25%;
-  text-align: center;
-  margin-top: 40rpx;
+    width: 25%;
+    text-align: center;
+    margin-top: 40rpx;
 }
 
 .bot {
-  border-bottom: 3rpx solid #f4f4f4;
-  margin-bottom: 40rpx;
+    border-bottom: 3rpx solid #f4f4f4;
+    margin-bottom: 40rpx;
 }
 
 .newbox {
-  background: white;
-  padding: 10rpx 30rpx;
-  margin-top: 20rpx;
+    background: white;
+    padding: 10rpx 30rpx;
+    margin-top: 20rpx;
 }
 
 .btn {
-  position: absolute;
-  top: 10%;
-  right: 30rpx;
-  color: white;
-  background: #ffa200;
-  padding: 0 40rpx;
-  height: 62rpx;
-  border-radius: 31rpx;
-  text-align: center;
-  line-height: 62rpx;
+    position: absolute;
+    top: 10%;
+    right: 30rpx;
+    color: white;
+    background: #ffa200;
+    padding: 0 40rpx;
+    height: 62rpx;
+    border-radius: 31rpx;
+    text-align: center;
+    line-height: 62rpx;
 }
 
 .gray {
-  filter: grayscale(98%);
-  filter: gray;
+    filter: grayscale(98%);
+    filter: gray;
 }
 
 /* 轮播小点点 */
 .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
-  margin-left: 36%;
+    margin-left: 36%;
 }
 
 .swiper-box .wx-swiper-dot {
-  width: 20rpx;
-  display: inline-flex;
-  height: 5rpx;
-  margin-left: 10rpx;
-  justify-content: space-between;
+    width: 20rpx;
+    display: inline-flex;
+    height: 5rpx;
+    margin-left: 10rpx;
+    justify-content: space-between;
 }
 
 .swiper-box .wx-swiper-dot::before {
-  content: '';
-  flex-grow: 1;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 0rpx
+    content: '';
+    flex-grow: 1;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 0rpx
 }
 
 .swiper-box .wx-swiper-dot-active::before {
-  background: #ff3333;
+    background: #ff3333;
 }
 
 .swiper-box .wx-swiper-dot-active {
-  width: 40rpx;
+    width: 40rpx;
 }
 
 /* 外层组件的宽度可设置成100%或具体数值 */
 .adContainer {
-  width: 100%;
+    width: 100%;
+}
+
+
+.menuImg{
+    width: 132rpx;
+    height: 134rpx;
 }

miniprogram/pages/my/my.js

@@ -1,100 +1,138 @@
 let app = getApp()
 Page({
 
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    DOMAIN_NAME: app.IMG_NAME,
-    customerPages: [
-      [{
-          listIcon: "icontubiao-1",
-          zh: "我的活动",
-          url: "/pages/myActivities/myActivities",
-          borderRadius: '20rpx 20rpx 0 0'
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        // tabBar param
+        tabBarParam: {
+            selected: 2,
+            color: "#515151",
+            selectedColor: "#217CFF",
+            backgroundColor: "#ffffff",
         },
-        {
-          listIcon: "iconqiyexinxi",
-          zh: "业务申请",
-          url: "../my/serviceApply/serviceApply"
-        },
-        {
-          listIcon: "iconqiyexinxi",
-          zh: "园区建议",
-          url: "/pages/complaint/complaint",
-          borderRadius: '0 0 20rpx 20rpx',
-          marginbottom: true
-        },
-        {
-          listIcon: "iconzhanghaoshezhi",
-          zh: "账号设置",
-          url: "/pages/my/accountSetting/accountSetting",
-          borderRadius: '20rpx 20rpx 0 0'
-        },
-        {
-          listIcon: "iconfuwu",
-          zh: "我的服务",
-          url: "/pages/enterpriseServices/myServiceList/myServiceList"
-        },
-        {
-          listIcon: "iconguzhangbaoxiu",
-          zh: "我的报修",
-          url: "/pages/parkRepair/parkRepair",
-          borderRadius: '0 0 20rpx 20rpx'
-        }
-      ]
-    ],
-    memberInfo: {}
-  },
+        // tabBar menu
+        tabBarList: [{
+                "pagePath": "pages/index/index",
+                "iconPath": "/images/tabbar/home.png",
+                "selectedIconPath": "/images/tabbar/home-select.png",
+                "text": "首页"
+            },
+            {
+                "pagePath": "pages/parkRepair/parkRepair",
+                "iconPath": "/images/tabbar/openDoor.png",
+                "selectedIconPath": "/images/tabbar/openDoor.png",
+                "text": "开门",
+                "bulge": true,
+            },
+            {
+                "pagePath": "pages/my/my",
+                "iconPath": "/images/tabbar/my.png",
+                "selectedIconPath": "/images/tabbar/my-select.png",
+                "text": "我的"
+            },
+        ],
+        DOMAIN_NAME: app.IMG_NAME,
+        customerPages: [
+            [{
+                    listIcon: "icontubiao-1",
+                    zh: "我的活动",
+                    url: "/pages/myActivities/myActivities",
+                    borderRadius: '20rpx 20rpx 0 0'
+                },
+                {
+                    listIcon: "iconqiyexinxi",
+                    zh: "业务申请",
+                    url: "../my/serviceApply/serviceApply"
+                },
+                {
+                    listIcon: "iconqiyexinxi",
+                    zh: "园区建议",
+                    url: "/pages/complaint/complaint",
+                    borderRadius: '0 0 20rpx 20rpx',
+                    marginbottom: true
+                },
+                {
+                    listIcon: "iconzhanghaoshezhi",
+                    zh: "账号设置",
+                    url: "/pages/my/accountSetting/accountSetting",
+                    borderRadius: '20rpx 20rpx 0 0'
+                },
+                {
+                    listIcon: "iconfuwu",
+                    zh: "我的服务",
+                    url: "/pages/enterpriseServices/myServiceList/myServiceList"
+                },
+                {
+                    listIcon: "iconguzhangbaoxiu",
+                    zh: "我的报修",
+                    url: "/pages/parkRepair/parkRepair",
+                    borderRadius: '0 0 20rpx 20rpx'
+                }
+            ]
+        ],
+        memberInfo: {}
+    },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {},
-  onShow() {
-    let that = this
-    if (wx.getStorageSync('token')) {
-      app.AjaxRequest('get', {
-        'content-type': 'application/json',
-        'Authorization': 'Bearer ' + app.Getopenid()
-      }, '/user/profile', {}, function (res) {
-        that.setData({
-          memberInfo: res.data
-        })
-      })
-    } else {
-      app.getlogin()
-    }
-  },
-  navDetail(e) {
-    wx.navigateTo({
-      url: e.currentTarget.dataset.url,
-    })
-  },
-  navigateTo(e) {
-    if (wx.getStorageSync('token')) {
-      if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') {
+    // 切换tabbar
+    switchTab(e) {
+        const data = e.currentTarget.dataset
+        console.log('switchTab', data)
+        const url = data.path
         wx.switchTab({
-          url: e.currentTarget.dataset.url,
+            url: '/' + url
         })
-      } else {
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {},
+    onShow() {
+        let that = this
+        if (wx.getStorageSync('token')) {
+            app.AjaxRequest('get', {
+                'content-type': 'application/json',
+                'Authorization': 'Bearer ' + app.Getopenid()
+            }, '/user/profile', {}, function (res) {
+                that.setData({
+                    memberInfo: res.data
+                })
+            })
+        } else {
+            app.getlogin()
+        }
+    },
+    navDetail(e) {
         wx.navigateTo({
-          url: e.currentTarget.dataset.url,
+            url: e.currentTarget.dataset.url,
         })
-      }
-    } else {
-      app.getlogin()
+    },
+    navigateTo(e) {
+        if (wx.getStorageSync('token')) {
+            if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') {
+                wx.switchTab({
+                    url: e.currentTarget.dataset.url,
+                })
+            } else {
+                wx.navigateTo({
+                    url: e.currentTarget.dataset.url,
+                })
+            }
+        } else {
+            app.getlogin()
+        }
+    },
+    navpersonalData() {
+        if (wx.getStorageSync('token')) {
+            wx.navigateTo({
+                url: '../my/personalData/personalData',
+            })
+        } else {
+            wx.navigateTo({
+                url: '/pages/login/login',
+            })
+        }
     }
-  },
-  navpersonalData() {
-    if (wx.getStorageSync('token')) {
-      wx.navigateTo({
-        url: '../my/personalData/personalData',
-      })
-    } else {
-      wx.navigateTo({
-        url: '/pages/login/login',
-      })
-    }
-  }
 })

miniprogram/pages/my/my.wxml

@@ -1,31 +1,37 @@
 <view class="page">
-  <view bindtap="navpersonalData"
-    style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
-    <view style="width:164rpx;height:164rpx;border-radius:50%;overflow:hidden;">
-      <image src="{{memberInfo.avatar? memberInfo.avatar:'/images/user-unlogin.jpg'}}" mode="widthFix"
-        style="width: 100%;"></image>
-    </view>
-    <view style="font-size:12pt;line-height:164rpx;width: 66%;text-indent: 40rpx;">{{memberInfo.nickname? memberInfo.nickname:'登录'}}</view>
-    <view class="iconBox">
-      <text class="iconfont iconyou" style="color:#939393;line-height:164rpx;"></text>
-    </view>
-  </view>
-
-  <view class="my-page">
-
-    <view class="my-mainfun-moudel1">
-      <block wx:for="{{customerPages[0]}}" wx:for-item="list" wx:key="i">
-        <view class="main-item2" bindtap='navigateTo' data-url="{{list.url}}"
-          style="{{list.marginbottom?'margin-bottom:25rpx;':''}};{{list.bordernone?'border-bottom:none':''}};border-radius:{{list.borderRadius}}"
-          hidden='{{list.hide}}'>
-          <view class="main-item-text1">
-            <view class="text-titl1">{{list.zh}}</view>
-          </view>
-          <view class="iconBox">
-            <text class="iconfont iconyou" style="color:#939393"></text>
-          </view>
+    <view bindtap="navpersonalData" style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
+        <view style="width:164rpx;height:164rpx;border-radius:50%;overflow:hidden;">
+            <image src="{{memberInfo.avatar? memberInfo.avatar:'/images/user-unlogin.jpg'}}" mode="widthFix" style="width: 100%;"></image>
+        </view>
+        <view style="font-size:12pt;line-height:164rpx;width: 66%;text-indent: 40rpx;">{{memberInfo.nickname? memberInfo.nickname:'登录'}}</view>
+        <view class="iconBox">
+            <text class="iconfont iconyou" style="color:#939393;line-height:164rpx;"></text>
+        </view>
+    </view>
+
+    <view class="my-page">
+
+        <view class="my-mainfun-moudel1">
+            <block wx:for="{{customerPages[0]}}" wx:for-item="list" wx:key="i">
+                <view class="main-item2" bindtap='navigateTo' data-url="{{list.url}}" style="{{list.marginbottom?'margin-bottom:25rpx;':''}};{{list.bordernone?'border-bottom:none':''}};border-radius:{{list.borderRadius}}" hidden='{{list.hide}}'>
+                    <view class="main-item-text1">
+                        <view class="text-titl1">{{list.zh}}</view>
+                    </view>
+                    <view class="iconBox">
+                        <text class="iconfont iconyou" style="color:#939393"></text>
+                    </view>
+                </view>
+            </block>
+        </view>
+    </view>
+
+
+    <!-- tabBar -->
+    <view class="tab-bar">
+        <view wx:for="{{tabBarList}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+            <view wx:if="item.bulge" class="tab-bar-bulge"></view>
+            <image class="image" src="{{tabBarParam.selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+            <view class="tab-bar-view" style="color: {{tabBarParam.selected === index ? tabBarParam.selectedColor : tabBarParam.color}}">{{item.text}}</view>
         </view>
-      </block>
     </view>
-  </view>
 </view>

miniprogram/pages/my/my.wxss

@@ -1,3 +1,5 @@
+@import "../../tabBar.wxss";
+
 .page {
   overflow: auto;
   height: 100%;

miniprogram/tabBar.wxss

@@ -0,0 +1,58 @@
+
+
+.tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    background: #FFF;
+    display: flex;
+    line-height: 1.2;
+    padding-bottom: 60rpx;
+    border-top: 1px solid #e6e6e6;
+  }
+  
+  .tab-bar-item {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  
+  .tab-bar-item .image {
+    width: 26px;
+    height: 26px;
+  }
+  .bulge {
+    background-color: #FFF;
+  }
+  .bulge .tab-bar-bulge{
+    position: absolute;
+    z-index: -1;
+    width: 64px;
+    height: 64px;
+    top: -24px;
+    border-radius: 50%;
+    border-top: 1px solid #e6e6e6;
+    background-color: #FFF;
+  }
+  .bulge .image{
+    position: absolute; 
+    width: 50px;
+    height: 50px;
+    top: -16px;
+  }
+  .bulge .tab-bar-view{
+    position: relative;
+    bottom: -16px;
+    margin-top: 4px;
+  }
+  
+  .tab-bar-item .tab-bar-view {
+    font-size: 12px;
+    margin-top: 4px;
+  }
+