一行显示4个，超出自动换行（解决办法）

蔚落 2022-09-12 01:55 225阅读 0赞

先看一下问题吧

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2S6KGr5oqY5omH_size_11_color_FFFFFF_t_70_g_se_x_16][]

data() {
        return {
            myHealthAdminMenu: {
    		name: '健康管理',
    		list: [{
    			name: '基础信息',
    			image: $mAssetsPath.iconHealth1,
    			isAstrict: false
    		}, {
    			name: '健康档案',
    			image: $mAssetsPath.iconHealth2,
    			isAstrict: false
    		}, {
    			name: '用药管理',
    			image: $mAssetsPath.iconHealth3,
    			isAstrict: true
    		}, {
    			name: '健康建议',
    			image: $mAssetsPath.iconHealth4,
    			isAstrict: true
    		}, {
    			name: '健康计划',
    			image: $mAssetsPath.iconHealth5,
    			isAstrict: true
    		}, {
    			name: '我的管理师',
    			image: $mAssetsPath.iconHealth6,
    			isAstrict: true
    		}]
    	},
        }
    }

<view class="health-admin unify-margin">
    			
    			<view class="title">{
       {myHealthAdminMenu.name}}</view>
    			
    			
    			<view class="admin-list unify-background-color unify-flex">
    				<view class="admin-item" v-for="(item,index) in myHealthAdminMenu.list" :key="index">
    					<image class="image" :src="item.image" mode=""></image>
    					<view class="">{
       {item.name}}</view>
    				</view>
    			</view>
    		</view>

公共css

// 健康管理列表
    		    .admin-list {
    				height:	360rpx;
    				border-radius: 20rpx;
    				overflow: hidden;
    				justify-content: space-around;
    				align-items: center;
    				flex-wrap: wrap;
    				
    				.admin-item {
    					flex: 24%;
    					text-align: center;
    					font-size: $uni-font-size-sm;
    					
    					.image {
    						width: 76rpx;
    						height: 76rpx;
    					}
    				}
    			}

第一种

.admin-item:last-child:nth-child(4n - 1) {
    					margin-right: calc(24% + 4% / 3);
    				}
    				
    				.admin-item:last-child:nth-child(4n - 2) {	// 24的2倍  4的2倍
    					margin-right: calc(48% + 8% / 3);
    				}
    				
    				.admin-item:last-child:nth-child(4n - 3) {	// // 24的3倍  4的3倍
    					margin-right: calc(72% + 12% / 3);
    				}

第二种 使用方法：:class="\{'admin-list-af3': myHealthAdmin.list.length / 4 == 1.25, 'admin-list-af2': myHealthAdmin.list.length / 4 == 1.5, 'admin-list-af1': myHealthAdmin.list.length / 4 == 1.75\}"

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2S6KGr5oqY5omH_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/54e5312d15c34737a04afeb083c9b404.png