tab

src/component/tabBarShop/tabBarShop.js

+// component/tabSort/tabSort.js
+var app = getApp()
+const wxService = require('../../utils/wxService')
+const utils = require('../../utils/util')
+
+Component({
+	/**
+	 * 组件的属性列表
+	 */
+	properties: {
+		tabList:{
+      type: Array,
+      type: []
+    }
+	},
+	attached() {
+		console.log('----', this.data.tabList)
+		this.setData({
+			categoryList: this.data.tabList
+		})
+	},
+	/**
+	 * 组件的初始数据
+	 */
+	data: {
+		categoryList:[],
+		currentTab: 0
+	},
+	/**
+	 * 组件的方法列表
+	 */
+	methods: {
+		// _getUserInfo(res = {}) {
+		// 	wxService.nextTick(() => {
+		// 		this.triggerEvent('getAuth', res);
+		// 	})
+		// },
+		// handelToCart() {
+		// 	wxService.router(`/pages/cart/cart`)
+		// },
+		// // 设置tab active
+		// switchNav(event) {
+		// 	utilLink.currentLinkRouter(event, this)
+		// },
+		switchTab(event) {
+			var cur = event.currentTarget.dataset.current
+			this.setData({
+				currentTab: cur
+			})
+		}
+	}
+})

src/component/tabBarShop/tabBarShop.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/tabBarShop/tabBarShop.wxml

+<!--component/tabSort/tabSort.wxml-->
+<view class="tab-sort" wx:if="{{categoryList}}">
+	<!--<scroll-view scroll-x class="scroll-view_H" scroll-with-animation="{{true}}">-->
+		<block
+		 wx:for="{{categoryList}}"
+		 wx:for-index="idx"
+		 wx:for-item="item"
+		 wx:key="idx"
+		>
+			<view
+			 class="scroll-view-item {{currentTab == idx ?'active':''}}"
+			 bindtap="switchTab"
+			 data-current="{{idx}}"
+			>
+				{{item.title}}
+			</view>
+		</block>
+	<!--</scroll-view>-->
+</view>
+

src/component/tabBarShop/tabBarShop.wxss

+/* component/tabSort/tabSort.wxss */
+/* @import '/base/base.wxss'; */
+.tab-sort {
+	display: flex;
+	white-space: nowrap;
+	justify-content: center;
+	box-sizing: border-box;
+	height: 65rpx;
+	line-height: 65rpx;
+	background:linear-gradient(90deg,#0091ff 0%,#20a4f7 100%);
+}
+.scroll-view_H {
+	width: 100%;
+	height: 100%;
+}
+.scroll-view-item {
+	display: inline-block;
+	text-align: center;
+	color: #FFF;
+	font-size: 22rpx;
+	width: 126rpx;
+	/* height: 37rpx; */
+	/* margin-top: 18rpx; */
+}
+.active {
+	/* width: 126rpx;
+	height: 37rpx; */
+	color: rgba(0, 145, 255, 1);
+	background-color: rgba(255, 255, 255, 1);
+	/* border-radius: 17rpx; */
+}

src/pages/shopping/kpi/kpi.js

@@ -7,7 +7,20 @@ wxService.page({
    * 页面的初始数据
    */
   data: {
-
+    tabList: [
+      {
+        title: '销售任务',
+      },
+      {
+        title: '招募任务',
+      },
+      {
+        title: '内容任务',
+      },
+      {
+        title: '维护任务',
+      }
+    ]
   },
 
   /**

src/pages/shopping/kpi/kpi.json

 {
-  "usingComponents": {}
+  "navigationBarTitleText": "KPI",
+  "usingComponents": { "tab-shop": "/component/tabBarShop/tabBarShop"}
 }
\ No newline at end of file

src/pages/shopping/kpi/kpi.wxml

 <!--pages/kpi/kpi.wxml-->
-<text>pages/kpi/kpi.wxml</text>
+<tab-shop tab-list="{{tabList}}"/>

src/project.config.json

@@ -39,7 +39,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 46,
+			"current": 47,
 			"list": [
 				{
 					"id": -1,
@@ -355,6 +355,13 @@
 					"pathName": "subPackage/page/pages/noPermission/noPermission",
 					"query": "",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "kpi",
+					"pathName": "pages/shopping/kpi/kpi",
+					"query": "",
+					"scene": null
 				}
 			]
 		}