描述:底部tabbar

miniprogram/app.json

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

miniprogram/pages/index/index.js

@@ -2,6 +2,35 @@ const app = getApp()
 Page({
     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": "我的"
+            },
+        ],
+
         IMG_NAME: app.IMG_NAME,
         indicatorDots: true,
         autoplay: true,
@@ -9,9 +38,8 @@ Page({
         duration: 1000,
         bannerList: [{
             bannerImg: ''
-      }
+        }],
-    ],
+        menuList: [{
-    list: [{
                 name: "创业活动",
                 img: "/images/hicon/chuangyehuodong.png",
                 path: "/pages/community/community"
@@ -64,6 +92,11 @@ Page({
               path: "/pages/parkRepair/parkRepair"
             },      
             */
+            {
+                name: "会议预约",
+                img: "/profile/static/index/menu-hyyy.png",
+                path: ""
+            },
         ],
         homelist: [],
         background: [{
@@ -72,21 +105,19 @@ Page({
         }, {
             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: ''
         }]
     },
 
+    // 切换tabbar
+    switchTab(e) {
+        const data = e.currentTarget.dataset
+        console.log('switchTab', data)
+        const url = data.path
+        wx.switchTab({
+            url: '/' + url
+        })
+    },
+
     onShow() {
         let that = this
         if (wx.getStorageSync('token')) {

miniprogram/pages/index/index.wxml

@@ -4,8 +4,7 @@
             <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}}"
+        <swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='true' style='height:{{Height}}' wx:if="{{background.length > 0}}">
-      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>
@@ -15,13 +14,21 @@
 
         <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}}"
+            <view class="fixedbox" wx:for='{{menuList}}' wx:key='index' data-path="{{item.path}}" data-name="{{item.name}}" bindtap="navapply">
-        bindtap="navapply">
+                <image class="menuImg" src="{{IMG_NAME + item.img}}"></image>
-        <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>
+
+    <!-- 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>
 </view>

miniprogram/pages/index/index.wxss

@@ -1,4 +1,5 @@
 @import "../../app.wxss";
+@import "../../tabBar.wxss";
 
 page {
     overflow: hidden;
@@ -7,6 +8,7 @@ page {
 
 
 .topList {
+    display: none;
     width: 100%;
     height: 70rpx;
     line-height: 70rpx;
@@ -18,7 +20,7 @@ page {
     z-index: 9999999;
 }
 
-.swiper-box{
+.swiper-box {
     margin-top: 70rpx;
 }
 
@@ -123,3 +125,9 @@ page {
 .adContainer {
     width: 100%;
 }
+
+
+.menuImg{
+    width: 132rpx;
+    height: 134rpx;
+}

miniprogram/pages/my/my.js

@@ -5,6 +5,34 @@ Page({
      * 页面的初始数据
      */
     data: {
+        // tabBar param
+        tabBarParam: {
+            selected: 2,
+            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": "我的"
+            },
+        ],
         DOMAIN_NAME: app.IMG_NAME,
         customerPages: [
             [{
@@ -47,6 +75,16 @@ Page({
         memberInfo: {}
     },
 
+    // 切换tabbar
+    switchTab(e) {
+        const data = e.currentTarget.dataset
+        console.log('switchTab', data)
+        const url = data.path
+        wx.switchTab({
+            url: '/' + url
+        })
+    },
+
     /**
      * 生命周期函数--监听页面加载
      */

miniprogram/pages/my/my.wxml

@@ -1,9 +1,7 @@
 <view class="page">
-  <view bindtap="navpersonalData"
+    <view bindtap="navpersonalData" style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
-    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"
+            <image src="{{memberInfo.avatar? memberInfo.avatar:'/images/user-unlogin.jpg'}}" mode="widthFix" style="width: 100%;"></image>
-        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">
@@ -15,9 +13,7 @@
 
         <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}}"
+                <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}}'>
-          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>
@@ -28,4 +24,14 @@
             </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>
+    </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;
+  }
+