flex 布局，元素不固定处理
最近用flex布局，但是每个栏目数目不固定，布局起来，有些很紧密，有些间距才超级大，与设计稿的效果相差太远太远了。
之前我处理，是写一堆样式，把可能的情况都包含，勉强可以实现。
今天又碰到类似的问题，但是我不想那样写了。于是网上搜索了。终于找到一个我满意的。
链接：https://www.csdn.net/tags/NtjaYgxsMjAyNTMtYmxvZwO0O0OO0O0O.html
我实现的效果
关键样式代码
.chy-test:last-of-type { //这个才是取同类最后一个 https://www.csdn.net/tags/NtjaYgxsMjAyNTMtYmxvZwO0O0OO0O0O.html margin-right: calc(26% + 22% / 2); } .chy-test:nth-child(3n) { //第3个和3n元素的处理 margin-right: 0; }
我的页面代码
<template> <view class="chy-page "> <u-navbar class="custom-header" title="编辑客户标签" height="44" :autoBack="true"> <view slot="right"> <view>确定</view> </view> </u-navbar> <view class="chy-lable-box"> <block v-for="(tag,index) in tempCustomerLabelJsonList" :key="index"> <view class="chy-item " :style="{background:tag && tag.split('_')[2],color:'#FFFFFF'}"> {{(tag&&tag.split('_')[0])}} </view> </block> <!-- <block v-for="tag in customerInfo.customerLabelJsonList && customerInfo.customerLabelJsonList" :key="tag && tag.split('_')[0]"> <u-tag :text="`${(tag&&tag.split('_')[0])}` " plain size="large" shape="circle" class="chy-tag" color="#ffffff" :bgColor="tag && tag.split('_')[2]"></u-tag> </block> --> </view> <view class="chy-lable-biglist-box"> <block v-for="(item,index) in groupLabelAllList" :key="index"> <view class="chy-lable-item"> <view class="chy-lable-title"> {{item.groupName}} {{ item.selectedType == 1 ? "单选" : "多选"}} </view> <view class="chy-lable-list-box"> <block v-for="(itemSon,indexSon) in item.labelJsonList" :key="indexSon"> <view class="chy-test"> <view class="chy-item" :style="{background:item.labelColor,color:'#FFFFFF'}" @click="itemSon.isEdit ? toggleLabel(itemSon, item): ''"> <view class=" chy-item-left">{{itemSon.lableName}} </view> <u-icon name="checkmark" color="#FFFFFF" class="chy-item-right" v-if="itemSon.selected"> </u-icon> </view> </view> </block> </view> </view> </block> </view> </view> </template> <script> import { test } from '../../../common/crm/xxxx.js' import { demo } from '../../../common/crm/xxxxxxx.js' export default { data() { return { tempCustomerLabelJsonList: [], //已经拥有的标签 groupLabelAllList: [], //所有标签 flag: true, //表示和拥有的没有匹配上 } }, onLoad() { let that = this // #ifndef APP-NVUE const eventChannel = this.getOpenerEventChannel(); // #endif // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('sendToeLableData', function(res) { //console.log(res, "sendToeLableData") that.tempCustomerLabelJsonList = res.data; that.getDemoXXXXX(); console.log(that.groupLabelAllList, "groupLabelAllList") }) }, methods: { /** 所有标签信息 */ getDemoXXX() { let that = this; that.groupLabelAllList = []; demoXXX({}).then((response) => { let oldData = response.data; that.mergerGroupLableNew(oldData); }); }, //数据处理 mergerGroupLableNew(oldData) { let that = this; oldData.forEach(function(item) { // if(item.groupName=='爱好'){ that.getTargetDataNew(item); // } }); }, getTargetDataNew(item) { let that = this; that.flag = true; let bData = { groupId: item.groupId, groupName: item.groupName, selectedType: item.selectedType, labelColor: item.labelColor, labelJsonList: [], }; if (that.tempCustomerLabelJsonList.length == 0) { //拥有的标签循环完毕了，列表标签还没有循环完成的 //alert("d") item.labelJsonList.forEach(function(itemLable) { //自身循环 bData.labelJsonList.push({ lableName: itemLable.trim(), selected: false, //未选中 isEdit: true, groupId: item.groupId.trim(), }); }); } else { that.tempCustomerLabelJsonList.forEach(function(xitem) { // console.log(xitem,'xitem') if (xitem.split("_")[1] == item.groupId) { item.labelJsonList.forEach(function(son) { let sonJson = { lableName: son.trim(), selected: null, //选中 isEdit: true, //是否可编辑 true可以，false不可以 groupId: item.groupId.trim(), result: null, orderNum: 0, }; if (son == xitem.split("_")[0]) { that.flag = false; //表示当前循环有匹配上 sonJson.selected = true; sonJson.orderNum = 1; //找到标签 // let deleteData = that.tempCustomerLabelJsonList.splice( // that.tempCustomerLabelJsonList.indexOf(xitem), // 1 // ); //用完删除 } else { sonJson.selected = false; } if (item.selectedType == 2) { sonJson.result = bData.labelJsonList.some( (x) => x.lableName == sonJson.lableName ); if (!sonJson.result) { bData.labelJsonList.push(sonJson); } if (sonJson.result && sonJson.selected) { let oldData = JSON.parse(JSON.stringify(sonJson)); oldData.selected = false; let deleteData = bData.labelJsonList.splice( bData.labelJsonList.findIndex( (o) => o.lableName == oldData.lableName && oldData.selected == o.selected ), 1, sonJson ); } } else { bData.labelJsonList.push(sonJson); } }); } }); if (that.flag) { //当次循环没有匹配上的数据循环 //没有匹配上就直接添加 item.labelJsonList.forEach(function(itemLable) { bData.labelJsonList.push({ lableName: itemLable.trim(), selected: false, //未选中 isEdit: true, groupId: item.groupId.trim(), }); }); } } that.groupLabelAllList.push(bData); //循环一次加一次 }, //切换标签是否选中 toggleLabel(tag, item) { tag.orderNum = 2; if (item.selectedType == 1) { //单选 tag.selected = !tag.selected; if ( item.labelJsonList.filter((item) => item.selected == true).length > 1 ) { uni.showToast({ title: '您已经选中一个标签，请先取消再选择!', icon: 'error' }) tag.selected = !tag.selected; } } else { //多选 tag.selected = !tag.selected; } }, } } </script> <style scoped lang="scss"> .chy-page { // padding: 10px; background: #F4F5F6; } .chy-lable-box { margin: 50px 0 20px 0; padding: 10px; background: #FFFFFF; border-radius: 10px; // border: 1px solid red; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; .chy-item { width: 26%; // border: 1px solid red; text-align: center; padding: 5px; border: 1px solid #00A0E9; box-sizing: border-box; border-radius: 15px; margin: 5px 0; background: #E6F7FF; color: #00A0E9; font-size: 12px; word-wrap: break-word; } } .chy-lable-biglist-box { background: #FFFFFF; .chy-lable-item { background: #FFFFFF; margin: 10px 0 20px 0; .chy-lable-title { font-weight: 400; font-size: 15px; color: #666666; margin: 10px 15px 0 15px; padding-top: 10px; } .chy-lable-list-box { padding: 10px; background: #FFFFFF; // border: 1px solid red; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; .chy-test { width: 26%; } .chy-item { flex: 1; // border: 1px solid red; text-align: center; padding: 5px; // border: 1px solid #F2F2F2; box-sizing: border-box; border-radius: 15px; margin: 5px 0; background: #F2F2F2; color: #333333; font-size: 12px; word-wrap: break-word; display: flex; justify-content: space-between; align-items: center; .chy-item-left { flex: 1; text-align: center; } .chy-item-right { width: 30px; text-align: center; } } .chy-test:last-of-type { //这个才是取同类最后一个 https://www.csdn.net/tags/NtjaYgxsMjAyNTMtYmxvZwO0O0OO0O0O.html margin-right: calc(26% + 22% / 2); } .chy-test:nth-child(3n) { //第3个和3n元素的处理 margin-right: 0; } } // .chy-lable-list-box:last-of-type { // background: red; // } } } </style>
