浏览代码

小程序tabbar优化

elis 2 年之前
父节点
当前提交
50bce4098a
共有 21 个文件被更改,包括 97 次插入99 次删除
  1. 0 60
      nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.js
  2. 0 8
      nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.wxml
  3. 60 0
      nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.js
  4. 0 0
      nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.json
  5. 8 0
      nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.wxml
  6. 2 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.wxss
  7. 10 11
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.js
  8. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.json
  9. 1 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.wxml
  10. 6 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.js
  11. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.json
  12. 1 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.wxml
  13. 1 0
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.js
  14. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.json
  15. 1 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.wxml
  16. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/ourCanteen/ourCanteen.json
  17. 5 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.js
  18. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.json
  19. 1 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.wxml
  20. 0 1
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/serve/serve.json
  21. 1 2
      nngkxxdp/src/main/resources/static/nnzwminiapp/pages/serve/serve.wxml

+ 0 - 60
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.js

@@ -1,60 +0,0 @@
-const app = getApp();
-Component({
-	/**
-	 * 组件的属性列表
-	 */
-	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",
-				"text": "公开"
-			},
-			{
-				"selectedIconPath": "../../pages/images/f-gk2.png",
-				"iconPath": "../../pages/images/f-gk.png",
-				"pagePath": "../../pages/nais/nais",
-				"isSpecial": true,
-				"text": "这是南岸"
-			},
-			{
-				"selectedIconPath": "../../pages/images/f-fw2.png",
-				"iconPath": "../../pages/images/f-fw.png",
-				"pagePath": "../../pages/serve/serve",
-				"text": "服务"
-			},
-			{
-				"selectedIconPath": "../../pages/images/f-wd2.png",
-				"iconPath": "../../pages/images/f-wd.png",
-				"pagePath": "../../pages/myCenter/myCenter",
-				"text": "我的"
-			}
-		]
-	},
-	methods: {
-		switchTab(e) {
-			const data = e.currentTarget.dataset
-			const url = data.path
-			wx.switchTab({url})
-			this.setData({
-			  selected: data.index
-			})
-		  }
-	}
-})

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

@@ -1,8 +0,0 @@
-<!--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>

+ 60 - 0
nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.js

@@ -0,0 +1,60 @@
+const app = getApp();
+Component({
+	/**
+	 * 组件的属性列表
+	 */
+	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",
+				"text": "公开"
+			},
+			{
+				"selectedIconPath": "/pages/images/f-gk2.png",
+				"iconPath": "/pages/images/f-gk.png",
+				"pagePath": "/pages/nais/nais",
+				"isSpecial": true,
+				"text": "这是南岸"
+			},
+			{
+				"selectedIconPath": "/pages/images/f-fw2.png",
+				"iconPath": "/pages/images/f-fw.png",
+				"pagePath": "/pages/serve/serve",
+				"text": "服务"
+			},
+			{
+				"selectedIconPath": "/pages/images/f-wd2.png",
+				"iconPath": "/pages/images/f-wd.png",
+				"pagePath": "/pages/myCenter/myCenter",
+				"text": "我的"
+			}
+		]
+	},
+	methods: {
+		switchTab(e) {
+			const data = e.currentTarget.dataset
+			const url = data.path
+			wx.switchTab({url})
+			this.setData({
+			  selected: data.index
+			})
+		  }
+	}
+})

+ 0 - 0
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.json → nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.json


+ 8 - 0
nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.wxml

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

+ 2 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/components/tabbar/tabbar.wxss → nngkxxdp/src/main/resources/static/nnzwminiapp/custom-tab-bar/index.wxss

@@ -28,12 +28,12 @@
 	flex-direction: column;
   }
   
-  .tab-bar-item cover-image {
+  .tab-bar-item image {
 	width: 27px;
 	height: 27px;
   }
   
-  .tab-bar-item cover-view {
+  .tab-bar-item view {
 	font-size: 10px;
   }
   

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

@@ -12,17 +12,16 @@ Page({
 	canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName')
 	// 如需尝试获取用户信息可改为false
   },
-  // 事件处理函数
-//   pageLifetimes: {
-//     show() {
-//       if (typeof this.getTabBar === 'function' &&
-//         this.getTabBar()) {
-//         this.getTabBar().setData({
-//           selected: 0
-//         })
-//       }
-//     }
-//   },
+
+
+  onReady() {
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+			this.getTabBar().setData({
+			selected: 0
+			})
+		}
+	},
   bindViewTap() {
     wx.navigateTo({
       url: '/pages/myCenter/myCenter'

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.json

@@ -1,6 +1,5 @@
 {
 	"usingComponents": {
-		"foot":"../../components/tabbar/tabbar"
 	  },
 	  "navigationBarTitleText": "首页"
 }

+ 1 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/index/index.wxml

@@ -9,4 +9,4 @@
     </block>
   </view>
 </view>
-<foot></foot>
+

+ 6 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.js

@@ -13,7 +13,12 @@ Page({
 	 * 生命周期函数--监听页面初次渲染完成
 	 */
 	onReady() {
-
+		if (typeof this.getTabBar === 'function' &&
+		this.getTabBar()) {
+			this.getTabBar().setData({
+			selected: 0
+			})
+		}
 	},
 
 	/**

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.json

@@ -1,5 +1,4 @@
 {
 	"usingComponents": {
-		"foot":"../../components/tabbar/tabbar"
 	  }
 }

+ 1 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myCenter/myCenter.wxml

@@ -105,5 +105,4 @@
 		</view>
 	</view>
 
-</view>
-<foot></foot>
+</view>

+ 1 - 0
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.js

@@ -19,6 +19,7 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
+		console.log("nan"+1);
 		if (typeof this.getTabBar === 'function' &&
 		this.getTabBar()) {
 		this.getTabBar().setData({

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.json

@@ -1,5 +1,4 @@
 {
 	"usingComponents": {
-		"foot":"../../components/tabbar/tabbar"
 	}
 }

+ 1 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/nais/nais.wxml

@@ -1,3 +1,2 @@
 <!--pages/nais/nais.wxml-->
-<text>pages/nais/nais.wxml</text>
-<foot></foot>
+<text>pages/nais/nais.wxml</text>

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/ourCanteen/ourCanteen.json

@@ -1,5 +1,4 @@
 {
   "usingComponents": {
-    "foot":"../../components/tabbar/tabbar"
   }
 }

+ 5 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.js

@@ -21,8 +21,11 @@ Page({
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-		if (typeof this.getTabBar === 'function' &&
-		this.getTabBar()) {
+		console.log(1);
+		console.log(typeof this.getTabBar === 'function');
+		console.log(this.getTabBar());
+		if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+			console.log(2);
 		this.getTabBar().setData({
 		  selected: 1
 		})

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.json

@@ -1,5 +1,4 @@
 {
 	"usingComponents": {
-		"foot":"../../components/tabbar/tabbar"
 	}
 }

+ 1 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/publics/publics.wxml

@@ -1,3 +1,2 @@
 <!--pages/publics/publics.wxml-->
-<text>pages/publics/publics.wxml</text>
-<foot></foot>
+<text>pages/publics/publics.wxml</text>

+ 0 - 1
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/serve/serve.json

@@ -1,5 +1,4 @@
 {
 	"usingComponents": {
-		"foot":"../../components/tabbar/tabbar"
 	}
 }

+ 1 - 2
nngkxxdp/src/main/resources/static/nnzwminiapp/pages/serve/serve.wxml

@@ -1,3 +1,2 @@
 <!--pages/serve/serve.wxml-->
-<text>pages/serve/serve.wxml</text>
-<foot></foot>
+<text>pages/serve/serve.wxml</text>