Browse Source

导航栏修改

elis 2 years ago
parent
commit
7d712f7263

+ 1 - 55
nngkxxdp/src/main/resources/static/nnzwminiapp/app.js

@@ -5,7 +5,6 @@ App({
     // const logs = wx.getStorageSync('logs') || []
     // logs.unshift(Date.now())
     // wx.setStorageSync('logs', logs)
-	wx.hideTabBar()
     // 登录
     wx.login({
       success: res => {
@@ -22,62 +21,9 @@ App({
       }
     });
   },
-  editTabbar() {
-	let tabbar = this.globalData.tabBar;
-	console.log(tabbar);
-	let currentPages = getCurrentPages();
-	let _this = currentPages[currentPages.length - 1];
-	let pagePath = _this.route;
-	(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
-	for (let i in tabbar.list) {
-		tabbar.list[i].selected = false;
-		(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
-	}
-	_this.setData({
-		tabbar: tabbar
-	});
-	},
   globalData: {
     // isIPhoneX: false, //当前设备是否为 iPhone
-	userInfo: null,
-	tabBar:{
-		"backgroundColor": "#ffffff",
-		"color": "#CCCCCC",
-		"selectedColor": "#000",
-		"list": [
-			{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/index/index",
-				"text": ""
-			},
-			{
-			  "selectedIconPath": "",
-			  "iconPath": "",
-			  "pagePath": "",
-			  "text": ""
-			},
-			{
-			  "selectedIconPath": "",
-			  "iconPath": "",
-			  "pagePath": "pages/nais/nais",
-			  "isSpecial": true,
-			  "text": ""
-			},
-			{
-			  "selectedIconPath": "",
-			  "iconPath": "",
-			  "pagePath": "pages/serve/serve",
-			  "text": ""
-			},
-			{
-			  "selectedIconPath": "",
-			  "iconPath": "",
-			  "pagePath": "pages/myCenter/myCenter",
-			  "text": ""
-			}
-		  ]
-	  }
+	userInfo: null
   }
 })
 

+ 33 - 29
nngkxxdp/src/main/resources/static/nnzwminiapp/app.json

@@ -17,40 +17,44 @@
 	"style": "v2",
 	"sitemapLocation": "sitemap.json",
 	"tabBar": {
+		"custom": true,
 		"color": "#999",
 		"selectedColor": "#3D98FF",
 		"backgroundColor": "#fff",
 		"borderStyle": "white",
-		"list": [{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/index/index",
-				"text": ""
-			},
+		"list": [
 			{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/publics/publics",
-				"text": ""
-			},
-			{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/nais/nais",
-				"text": ""
-			},
-			{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/serve/serve",
-				"text": ""
-			},
-			{
-				"selectedIconPath": "",
-				"iconPath": "",
-				"pagePath": "pages/myCenter/myCenter",
-				"text": ""
-			}
+			"selectedIconPath": "/pages/images/f-fw2.png",
+			"iconPath": "pages/images/f-sy.png",
+			"pagePath": "pages/index/index",
+			"selected": false,
+			"text": "首页"
+		},
+		{
+			"selectedIconPath": "pages/images/f-gk2.png",
+			"iconPath": "pages/images/f-gk.png",
+			"pagePath": "pages/publics/publics",
+			"text": "公开"
+		},
+		{
+			"selectedIconPath": "pages/images/f-gk2.png",
+			"iconPath": "pages/images/f-gk.png",
+			"pagePath": "pages/nais/nais",
+			"isSpecial": true,
+			"text": "这是南岸"
+		},
+		{
+			"selectedIconPath": "pages/images/l-grzl.png",
+			"iconPath": "pages/images/l-grzl.png",
+			"pagePath": "pages/serve/serve",
+			"text": "服务"
+		},
+		{
+			"selectedIconPath": "pages/images/l-grzl.png",
+			"iconPath": "pages/images/l-grzl.png",
+			"pagePath": "pages/myCenter/myCenter",
+			"text": "我的"
+		}
 		]
 	}
 }

+ 48 - 52
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.js

@@ -1,64 +1,60 @@
 const app = getApp();
 Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-	
-    tabbar: {
-      type: Object,
-      value: {
-        "backgroundColor": "#ffffff",
-        "color": "#979795",
-		"selectedColor": "#1c1c1b",
-		"currentTab": 0,    // 默认首页为选中页面
-        "list": [
-			{
-			  "selectedIconPath": "../../pages/images/f-fw2.png",
-			  "iconPath": "../../pages/images/f-sy.png",
-			  "pagePath": "../../pages/index/index",
-			  "selected":false,
-			  "text": "首页"
+	/**
+	 * 组件的属性列表
+	 */
+	properties: {
+		
+	},
+	data: {
+		isIphoneX: app.globalData.systemInfo.model.search('iPhone') != -1 ? true : false,
+		selected: 0,
+		backgroundColor: "#ffffff",
+		color: "#979795",
+		selectedColor: "#1c1c1b",
+		currentTab: 0, // 默认首页为选中页面
+		list: [{
+				"selectedIconPath": "../../pages/images/f-fw2.png",
+				"iconPath": "../../pages/images/f-sy.png",
+				"pagePath": "../../pages/index/index",
+				"selected": false,
+				"text": "首页"
 			},
 			{
-			  "selectedIconPath": "../../pages/images/f-gk2.png",
-			  "iconPath": "../../pages/images/f-gk.png",
-			  "pagePath": "../../pages/publics/publics",
-			  "selected":false,
-			  "text": "公开"
+				"selectedIconPath": "../../pages/images/f-gk2.png",
+				"iconPath": "../../pages/images/f-gk.png",
+				"pagePath": "../../pages/publics/publics",
+				"text": "公开"
 			},
 			{
-			  "selectedIconPath": "../../pages/images/f-zsna.png",
-			  "iconPath": "../../pages/images/l-grzl.png",
-			  "pagePath": "../../pages/nais/nais",
-			  "selected":false,
-			  "isSpecial":true,
-			  "text": ""
+				"selectedIconPath": "../../pages/images/f-gk2.png",
+				"iconPath": "../../pages/images/f-gk.png",
+				"pagePath": "../../pages/nais/nais",
+				"isSpecial": true,
+				"text": "这是南岸"
 			},
 			{
-			  "selectedIconPath": "../../pages/images/l-grzl.png",
-			  "iconPath": "../../pages/images/l-grzl.png",
-			  "pagePath": "../../pages/serve/serve",
-			  "selected":false,
-			  "text": "服务"
+				"selectedIconPath": "../../pages/images/f-fw2.png",
+				"iconPath": "../../pages/images/f-fw.png",
+				"pagePath": "../../pages/serve/serve",
+				"text": "服务"
 			},
 			{
-			  "selectedIconPath": "../../pages/images/l-grzl.png",
-			  "iconPath": "../../pages/images/l-grzl.png",
-			  "pagePath": "../../pages/myCenter/myCenter",
-			  "selected":false,
-			  "text": "我的"
+				"selectedIconPath": "../../pages/images/f-wd2.png",
+				"iconPath": "../../pages/images/f-wd.png",
+				"pagePath": "../../pages/myCenter/myCenter",
+				"text": "我的"
 			}
-		  ]
-      }
-    }
-  },
-  data: {
-	isIphoneX: app.globalData.systemInfo.model.search('iPhone') != -1 ? true : false,
-	selected:0
-	// isIphoneX: app.e
-  },
-  methods: {
-
-  }
+		]
+	},
+	methods: {
+		switchTab(e) {
+			const data = e.currentTarget.dataset
+			const url = data.path
+			wx.switchTab({url})
+			this.setData({
+			  selected: data.index
+			})
+		  }
+	}
 })

+ 1 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.json

@@ -1,4 +1,3 @@
 {
-	"component": true,
-	"usingComponents": {}
+	"component": true
 }

+ 8 - 28
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.wxml

@@ -1,28 +1,8 @@
-<!--components/tabbar/tabbar.wxml-->
-<view class="tabbar_box {{isIphoneX ? 'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
-  <block wx:for="{{tabbar.list}}" wx:key="index">
-    <!-- // 二维码 -->
-    <navigator  class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="switchTab">
-		<block wx:if="{{item.isSpecial}}">
-			<view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
-			<image class='special-text-wrapper'></image>
-			<text>{{item.text}}</text>
-		</block>
-		<block wx:elif = "{{item.selected}}">
-			<image class="tabbar_icon" src="{{item.selectedIconPath}}"></image>
-			<text>{{item.text}}</text>
-		</block>
-		<block wx:else >
-			<image class="tabbar_icon" src="{{item.iconPath}}"></image>
-			<text>{{item.selected}}</text>
-		</block>
-    </navigator>
-    <!-- // 其它 -->
-	<!-- <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" 
-	style="color:{{selected === index ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
-		
-	</navigator> -->
-	
-	
-  </block>
-</view>
+<!--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>

+ 27 - 58
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.wxss

@@ -1,70 +1,39 @@
-/* components/tabbar/tabbar.wxss */
-.tabbar_box{
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
+.tab-bar {
 	position: fixed;
 	bottom: 0;
 	left: 0;
-	z-index: 999;
-	width: 100%;
-	height: 100rpx;
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-  }
-  .tabbar_box.iphoneX-height{
-	padding-bottom: 66rpx;
-  }
-  .middle-wrapper{
-  position: absolute;
-  right: 310rpx;
-  bottom: 0;
-  background-color: rgb(121, 27, 27);
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  border-top: 2rpx solid #f2f2f3;
+	right: 0;
+	height: 48px;
+	background: white;
+	display: flex;
+	padding-bottom: env(safe-area-inset-bottom);
   }
-  .middle-wrapper.iphoneX-height{
-  bottom: 66rpx;
+  
+  .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);
   }
-  .tabbar_nav{
+  
+  .tab-bar-item {
 	flex: 1;
+	text-align: center;
 	display: flex;
-	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	font-size: 20rpx;
-	height: 100%;
-	padding:5px 0px 5px 0px;
-	position: relative;
-  }
-  .tabbar_icon{
-	width: 56rpx;
-	height: 56rpx;
-	padding-bottom: 0rpx;
-  }
-  .special-wrapper{
-  position: absolute;
-  /* left: 77rpx; */
-  top: -36rpx;
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  border-top: 2rpx solid #f2f2f3;
-  background-color: #fff;
-  text-align: center;
-  box-sizing: border-box;
-  padding: 6rpx;
-  }
-  .special-wrapper .tabbar_icon{
-	width: 120rpx;
-	height: 120rpx;
+	flex-direction: column;
   }
-  .special-text-wrapper{
-  width: 56rpx;
-  height: 56rpx;
+  
+  .tab-bar-item cover-image {
+	width: 27px;
+	height: 27px;
   }
   
-  text{
-  padding-bottom: 20rpx;
-  }
+  .tab-bar-item cover-view {
+	font-size: 10px;
+  }
+  

+ 18 - 10
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.js

@@ -13,28 +13,36 @@ Page({
 	// 如需尝试获取用户信息可改为false
   },
   // 事件处理函数
+//   pageLifetimes: {
+//     show() {
+//       if (typeof this.getTabBar === 'function' &&
+//         this.getTabBar()) {
+//         this.getTabBar().setData({
+//           selected: 0
+//         })
+//       }
+//     }
+//   },
   bindViewTap() {
     wx.navigateTo({
       url: '/pages/myCenter/myCenter'
     })
   },
+  onShow(){
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+		this.getTabBar().setData({
+		selected: 0
+		})
+	}
+  },
   onLoad() {
-	app.editTabbar();
     if (wx.getUserProfile) {
       this.setData({
         canIUseGetUserProfile: true
       })
     }
   },
-  onShow: function () {
-	app.editTabbar();
-	console.log(thi.getTabBar());
-    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
-      this.getTabBar().setData({
-        selected: 0
-      })
-    }
-  },
   getUserProfile(e) {
     // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
     wx.getUserProfile({

+ 7 - 8
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.js

@@ -1,7 +1,6 @@
 // pages/nais/nais.js
 let app = getApp();
 Page({
-
 	/**
 	 * 页面的初始数据
 	 */
@@ -9,12 +8,6 @@ Page({
 
 	},
 
-	/**
-	 * 生命周期函数--监听页面加载
-	 */
-	onLoad(options) {
-		app.editTabbar();
-	},
 
 	/**
 	 * 生命周期函数--监听页面初次渲染完成
@@ -27,7 +20,13 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+		this.getTabBar().setData({
+		  selected: 4
+		})
+	  }
+	
 	},
 
 	/**

+ 6 - 9
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.js

@@ -1,7 +1,6 @@
 // pages/nais/nais.js
 let app = getApp();
 Page({
-
 	/**
 	 * 页面的初始数据
 	 */
@@ -10,13 +9,6 @@ Page({
 	},
 
 	/**
-	 * 生命周期函数--监听页面加载
-	 */
-	onLoad(options) {
-		app.editTabbar();
-	},
-
-	/**
 	 * 生命周期函数--监听页面初次渲染完成
 	 */
 	onReady() {
@@ -27,7 +19,12 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+		this.getTabBar().setData({
+		  selected: 2
+		})
+	  }
 	},
 
 	/**

+ 6 - 14
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.js

@@ -9,19 +9,6 @@ Page({
 
 	},
 
-	/**
-	 * 生命周期函数--监听页面加载
-	 */
-	onLoad(options) {
-		app.editTabbar();
-	},
-	onShow: function () {
-		if (typeof this.getTabBar === 'function' && this.getTabBar()) {
-		  this.getTabBar().setData({
-			selected: 1
-		  })
-		}
-	  },
 
 	/**
 	 * 生命周期函数--监听页面初次渲染完成
@@ -34,7 +21,12 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+		this.getTabBar().setData({
+		  selected: 1
+		})
+	  }
 	},
 
 	/**

+ 6 - 8
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/serve/serve.js

@@ -10,13 +10,6 @@ Page({
 	},
 
 	/**
-	 * 生命周期函数--监听页面加载
-	 */
-	onLoad(options) {
-		app.editTabbar();
-	},
-
-	/**
 	 * 生命周期函数--监听页面初次渲染完成
 	 */
 	onReady() {
@@ -27,7 +20,12 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-
+		if (typeof this.getTabBar === 'function' &&
+			this.getTabBar()) {
+			this.getTabBar().setData({
+			  selected: 3
+			})
+		  }
 	},
 
 	/**