feat: 新增tabs类型

App.vue

@@ -15,5 +15,18 @@
 
 <style lang="scss">
 	@import "uview-ui/index.scss";
-	/*每个页面公共css */
+	// 轮播指示点样式
+	wx-swiper.tab-swiper {
+		.wx-swiper-dots{
+			bottom: 0rpx;
+		}
+		.wx-swiper-dot {
+			width: 8rpx;
+			height: 4rpx;
+			border-radius: 2rpx;
+		}
+		.wx-swiper-dot-active {
+			width: 16rpx;
+		}
+	}
 </style>

components/NormalTabs/NormalTabs.vue

@@ -10,8 +10,8 @@
 			:bg-color="elementInfo.option.tabs.backgroundColor"
 			@change="handleTabsChange"
 		></u-tabs>
+		<template v-if="elementInfo.option.tabs.type === 'select'">
 			<u-input
-			v-if="elementInfo.option.tabs.type === 'select'"
 				v-model="tabsValue"
 				type="select"
 				border="true"
@@ -24,6 +24,26 @@
 				label-name="name"
 				@confirm="handleSelectChange"
 			></u-select>
+		</template>
+		
+		<swiper
+			v-if="elementInfo.option.tabs.type === 'group'"
+			class="tab-swiper"
+			:indicator-dots="tabsGroup.length > 1"
+			:style="[tabsStyle]"
+			:indicator-color="'#ccc'"
+			:indicator-active-color="elementInfo.option.tabs.backgroundColor"
+		>
+			<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
+				<view
+					class="tab-item"
+					:class="[tabsValue == tab.value ? 'active': '']"
+					v-for="tab in item"
+					:key="tab.value"
+					@click="handleChangeTabValue(tab.value)"
+				>{{tab.name}}</view>
+			</swiper-item>
+		</swiper>
 	</view>
 </template>
 
@@ -39,6 +59,29 @@
 				tabsValue: ''
 			};
 		},
+		computed: {
+			tabsGroup() {
+				const { type, count} = this.elementInfo.option.tabs
+				if (type === 'group') {
+					return this.$u.common.chunk(this.elementData.dataList.series, Number(count) * 2)
+				}
+				return []
+			},
+			tabsStyle() {
+				const { fontSize, color, activeColor, backgroundColor, count, frameWidth, frameColor, frameStyle, itemBackgroundColor } = this.elementInfo.option.tabs
+				return {
+					height: `${this.elementInfo.height}px`,
+					'--width': `${(100 / Number(count)) - 2}%`,
+					'--font-size': `${fontSize}px`,
+					'--color': color,
+					'--active-color': activeColor,
+					'--background-color': backgroundColor,
+					'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
+					'--item-background-color': itemBackgroundColor
+				}
+				
+			}
+		},
 		methods: {
 			initChart() {
 				this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
@@ -52,6 +95,10 @@
 				this.tabsValue = e[0].value
 				this.tabsValueChange()
 			},
+			handleChangeTabValue(value) {
+				this.tabsValue = value
+				this.tabsValueChange()
+			},
 			/**
 			 * 改变选项卡的值
 			 */
@@ -80,6 +127,31 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+.tab-group {
+	display: flex !important;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	width: 100%;
+}
+.tab-item {
+	width: var(--width);
+	margin: 1%;
+	font-size: var(--font-size);
+	color: var(--color);
+	border: var(--border-style);
+	background: var(--item-background-color);
+	border-radius: 5px;
+	padding: 5px 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-align: center;
+	cursor: pointer;
+	&.active {
+		color: var(--active-color);
+		background: var(--background-color);
+		border-color: var(--background-color);
+	}
+}
 </style>

pages/index/index.vue

@@ -118,14 +118,11 @@
 			uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
 				if(index.length && paramName && value) {
 					that.reportInfo.list = that.reportInfo.list.map(item => {
-						console.log('begin item', item)
 						const flag = index.includes(item.id)
 						if(flag && item.dataZoom) {
-							console.log('set item', item)
 							that.$set(item.dataZoom, 'start', value.start)
 							that.$set(item.dataZoom, 'end', value.end)
 						}
-						console.log('after item', item)
 						return item
 					})
 				}			

utils/common.js

@@ -54,13 +54,59 @@ const install = (Vue, vm) => {
 		return value / 750 * uni.getSystemInfoSync().windowWidth	
 	}
 	
+	const slice = (array, start, end) => {
+	  let length = array == null ? 0 : array.length
+	  if (!length) {
+	    return []
+	  }
+	  start = start == null ? 0 : start
+	  end = end === undefined ? length : end
+	
+	  if (start < 0) {
+	    start = -start > length ? 0 : (length + start)
+	  }
+	  end = end > length ? length : end
+	  if (end < 0) {
+	    end += length
+	  }
+	  length = start > end ? 0 : ((end - start) >>> 0)
+	  start >>>= 0
+	
+	  let index = -1
+	  const result = new Array(length)
+	  while (++index < length) {
+	    result[index] = array[index + start]
+	  }
+	  return result
+	}
+	
+	/**
+	 * 将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。
+	 * 如果array无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
+	 */
+	const chunk = (array, size = 1) => {
+		const length = array == null ? 0 : array.length
+		if (!length || size < 1) {
+			return []
+		}
+		let index = 0
+		let resIndex = 0
+		const result = new Array(Math.ceil(length / size))
+	
+		while (index < length) {
+			result[resIndex++] = slice(array, index, (index += size))
+		}
+		return result
+	}
+	
 	vm.$u.common = {
 		converFunction,
 		fillDigit,
 		toThousands,
 		dateFormat,
 		pxToRpx,
-		rpxToPx
+		rpxToPx,
+		chunk
 	}
 }