小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
uniapp 打造自用组件库 (三) 自适应数据展示模块
前言
本文将带领读者使用uniapp封装一些常用组件,方便日后开发时重复使用,当然文中封装的组件不可能适配所有应用场景,但是我希望读者可以跟着我的思路实现出来,然后可以在此基础上优化改进为自己合适的,本人一个前端小菜鸡,希望大佬们可以不吝赐教,也是对我的技术水平的提升
自适应数据展示模块
需求
某日接到新的开发需求,要求制作一个环图,同时图例要做成以下样式,当时觉得没啥难度,后来开发中却遇到了一个问题,有的分析项名称会异常的长,就会导致展示不全,于是就封装了一个组件,可以自适应宽度充满
效果展示
应用效果
应用代码
<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>