项目初始化

pages/tabbar/components/home/categoryCard.vue

@@ -0,0 +1,181 @@
+<template>
+	<view class="user-card-box">
+		
+		<view class="user-card">
+			<view class="title">
+				<view class="icon">
+					<u-icon name="grid-fill" size="20" color="#aaa"></u-icon>
+				</view>
+				<text class="text">技能分类</text>
+			</view>
+			
+			
+			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="swiperList" :current="current" :dots-styles="dotsStyles" field="content">
+				<swiper class="swiper-box" :class="dataList.length > 4 ? '' : 'line'" @change="change" :current="swiperDotIndex">
+					<swiper-item v-for="(swiper,si) in swiperList">
+						<view class="user-swiper">
+							<view @click="tabClick(item)" class="user-box" v-for="(item,i) in swiper.list">
+								<view class="avatar-box">
+									<u-image border-radius="10" height="140" width="140"  :src="item.thumb"></u-image>
+								</view>
+								<view class="nickname">{{item.name}}</view>
+							</view>
+						</view>  
+					</swiper-item>
+				</swiper>
+			</uni-swiper-dot>
+			
+		
+		</view>
+		
+		
+	</view>
+	
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		props: {
+			dataList: {
+				type: Array,
+				default: [],
+			},
+		}, 
+		data() {
+			return {
+				swiperDotIndex: 0,  
+				current: 0,
+				dotsStyles: {
+					backgroundColor: '#ddd',
+					border: '1px #ddd solid',
+					color: '#fff',
+					selectedBackgroundColor: 'var(--ui-BG-Main)',
+					selectedBorder: '1px var(--ui-BG-Main) solid'
+				},
+			}
+		},
+		computed: {
+			swiperList() {
+				return this.getSwiperList(this.dataList);
+			},
+		},
+		created() {
+			
+		},
+		methods: {
+			change(e) {
+				this.current = e.detail.current
+			},
+			getSwiperList(dataList) {
+				var swiperList = [];
+				var categoryList = [];
+				for(var i=0;i<dataList.length;i++){
+					var category = dataList[i];
+					categoryList.push(category);
+					if((i+1)%8 == 0 || (i+1) == dataList.length){
+						var swiper = {
+							list: categoryList
+						};
+						swiperList.push(swiper);
+						categoryList = [];
+					}
+				}
+				return swiperList;
+			},
+			clickItem(e) {
+				this.swiperDotIndex = e
+			},
+			tabClick(e) {
+				this.$emit('tabClick', e);
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.user-card-box {
+		background-color: #fff;
+		border-radius: 10px;
+	}
+	
+	.swiper-box {
+		height: 460rpx;
+	}
+	
+	.line {
+		height: 240rpx;
+	}
+	
+	.user-card {
+		padding: 10px 0;
+		padding-bottom: 0;
+		
+		.title {
+			padding: 10px;
+			padding-top: 0;
+			font-size: 28rpx;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+			padding-bottom: 15px;
+			
+			.icon {
+				background-color: #ddd;
+				width: 36rpx;
+				height: 36rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 100%;
+			}
+			
+			.text {
+				margin-left: 4px;
+			}
+		}
+		
+		.user-swiper {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0px 5px;
+				
+			.avatar-box {
+				margin-bottom: 5px;
+				position: relative;
+				
+				.badge {
+					width: 30rpx;
+					height: 30rpx;
+					background-color: var(--ui-BG-Main);
+					position: absolute;
+					right: 0;
+					bottom: 0;
+					border-radius: 100%;
+					border: 2px solid #fff;
+				}
+			}
+			
+			.user-box {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				margin-bottom: 10px;
+				width: 25%;
+				
+				.nickname {
+					font-size: 28rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					max-width: 140rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+	
+</style>