10-26 08:09 阅读 422

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>

作者：shengtu_归尘
链接：https://juejin.cn/post/7023294465188036615