6.30 版本提交

custom-tab-bar/index.js

@@ -0,0 +1,75 @@
+// components/custom-tab-bar/index.js
+const app = getApp();
+
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        color: "#858C9A",
+		selected:0,
+        selectedColor: "#F97316",
+        list: [
+            {
+                "pagePath": "/pages/index/index",
+                "text": "新闻动量",
+                "iconPath": "/static/icon/tabbar/home.png",
+                "selectedIconPath": "/static/icon/tabbar/home_s.png"
+            },
+            {
+                "pagePath": "/pages/invest/invest",
+                "text": "投资日历",
+                "iconPath": "/static/icon/tabbar/invest.png",
+                "selectedIconPath": "/static/icon/tabbar/invest_s.png"
+            },
+            {
+                "pagePath": "/pages/mine/mine",
+                "text": "个人中心",
+                "iconPath": "/static/icon/tabbar/mine.png",
+                "selectedIconPath": "/static/icon/tabbar/mine_s.png"
+            }
+        ]
+    },
+	attached() {
+		this.setData({
+			selected:app.globalData.tabIndex
+		})
+	},
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        switchTab(e) {
+            const data = e.currentTarget.dataset;
+            const url = data.path;
+			const index = data.index
+			// if(index==2||index==4)
+			// {
+			// 	//如果是购物车和我的，需要登录
+			// 	let token = wx.getStorageSync('token')
+			// 	if (!token) {
+			// 		wx.navigateTo({
+			// 			url:'/pages/login/login'
+			// 		})
+			// 		return
+			// 	} 
+			// }
+			app.globalData.tabIndex = index
+			wx.switchTab({url})
+        },
+        navigateTo(e) {
+            const data = e.currentTarget.dataset;
+            const url = data.path;
+            wx.navigateTo({
+                url: url
+            }) 
+        }
+    }
+})

custom-tab-bar/index.json

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

custom-tab-bar/index.wxml

@@ -0,0 +1,8 @@
+<!--components/custom-tab-bar/index.wxml-->
+<view class="tab-bar">
+    <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="{{item.jump=='nav'?'navigateTo':'switchTab'}}">
+    <image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}" mode="aspectFit"></image>
+    <view wx:if="{{item.text}}" class="tab-bar-view"
+     style="color: {{selected==index?selectedColor:color}};">{{item.text}}</view>
+    </view>
+</view>

custom-tab-bar/index.wxss

@@ -0,0 +1,55 @@
+/* components/custom-tab-bar/index.wxss */
+.tab-bar {
+    background-color: white;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 55px;
+    display: flex;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: content-box;
+	box-shadow: 0 -1px 5rpx 0 #eee;
+	z-index: 99;
+}
+.tab-bar-item 
+{
+    flex: 1;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+  .tab-bar-item .image {
+    margin: 16rpx 0 8rpx 0;
+    width: 40rpx;
+    height: 40rpx;
+  }
+  .bulge
+  {
+      position: relative;
+  }
+  .bulge .image
+  {
+    position: absolute;
+    top: -47rpx;
+    width: 94rpx;
+    height: 94rpx;
+  }
+  .bulge .tab-bar-view
+  {
+    margin-top: 60rpx;
+  }
+  .tab-bar-item .tab-bar-view {
+    font-size: 22rpx;
+    font-weight: 500;
+  }
+  .tab-bar .bg 
+  {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: auto;
+      z-index: -1;
+  }