uniapp 打造自用组件库 (三) 自适应数据展示模块

666 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

uniapp 打造自用组件库 (三) 自适应数据展示模块

前言

本文将带领读者使用uniapp封装一些常用组件,方便日后开发时重复使用,当然文中封装的组件不可能适配所有应用场景,但是我希望读者可以跟着我的思路实现出来,然后可以在此基础上优化改进为自己合适的,本人一个前端小菜鸡,希望大佬们可以不吝赐教,也是对我的技术水平的提升

自适应数据展示模块

需求

某日接到新的开发需求,要求制作一个环图,同时图例要做成以下样式,当时觉得没啥难度,后来开发中却遇到了一个问题,有的分析项名称会异常的长,就会导致展示不全,于是就封装了一个组件,可以自适应宽度充满

image.png

效果展示

应用效果

image.png

应用代码
<view>
		<YcolorBlock :list='myList' @change='clickItem'></YcolorBlock>
</view>
export default {
		data() {
			return {
				
				myList:[
					{
						color:'#ff3333',
						name:'C/C++攻城狮',
						data:'12'
					},
					{
						color:'#ffff33',
						name:'Java攻城狮',
						data:'322'
					},
					{
						color:'#ff33ff',
						name:'Python攻城狮',
						data:'323'
					},
					{
						color:'#0033ff',
						name:'PHP攻城狮',
						data:'323'
					},
					{
						color:'#003300',
						name:'.NET攻城狮',
						data:'323'
					}
				]
			}
		},
		methods: {
			clickItem(item){
				// 点击了
				console.log('item',item)
			},
		}
	}

实现思路

首先要使用flex布局实现自适应宽度,当不足一行时充满,超出一行时换行,然后就是传入数据的问题,由于根据设计我需要于环图一起使用,于是我就借用了环图的数据结构来实现这个模块,这样一来我们只要把数据往环图一放,再往模块中一放就可以了,同时增加了点击事件,方便其他功能扩展

完整实现代码

<!-- TODO
配合ucharts 实现图例
 list:[
	 {
		 data:'24', //展示的数据
		 name:'打卡次数',//数据的名字
		 color:'图例的颜色',
	 }
 ]
 -->
<template>
	<view class="views">
		<view class="viewItem" v-for="(i,index) in list" :style="{animation:`show ${0.5+index*0.2}s`}" @tap="tapitem(index,i)">
			<view class="info">
				<view class="colorBock" v-if='i.color' :style="{background:i.color}"></view>
				<text>{{i.data}}</text>
			</view>
			<view class="info">{{i.name}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			list:{
				type:Array,
				default:[],
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			tapitem(index,info){
				this.$emit('change',index,info)
			},
		}
	}
</script>

<style  lang="scss">
	
	.views {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		transition: 0.2s;
		min-height: 150rpx;
		.viewItem {
			display: flex;
			flex-direction: column;
			background-color: #f2f2f2;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			flex: 1;
			margin: 10rpx 8rpx;
			transition: 0.2s;
			&:active{
				opacity: 0.7;
				transform: scale(0.9);
			}
			.info {
				font-size: 12px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				display: flex;
				align-items: center;
				white-space: nowrap;
				.colorBock {
					height: 25rpx;
					width: 10rpx;
					margin-right: 10rpx;
				}

				text {
					display: flex;
					
					color: #333333;
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}
</style>