完成首页分类图片自适应添加

components/menuAssembly/index.vue

 <template>
 	<view class="page-body">
 		<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag||shopState===0?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
-			<view class="nav-left-item"  v-for="item in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
+			<view class="nav-left-item"  v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
 				:class="item.id == categoryId ? 'active' : ''">
-				<!-- <view class="imgbox"><image :style="{'height':'100%','width':'100%'}" :src="'../../static/imgs/image_50_50.png'"/></view> -->
+				<view class="imgbox" v-if="item.src"><image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.src"/></view>
 				<view><span>{{ item.name }}</span></view>
 				<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
 			</view>
@@ -69,7 +69,9 @@ export default {
 			goods:[],
 			shopCarFlag:false,
 			taBarHeight:0,
-			lastNumber:0
+			lastNumber:0,
+			width:0,
+			sizeList:[]
 		}
 	},
 	watch:{
@@ -113,6 +115,12 @@ export default {
 					this.categoryPostion = data
 				}).exec();
 			})
+			categorys[0]?categorys[0].src = 'http://fakeimg.pl/70x50/':''
+			categorys[1]?categorys[1].src = 'http://fakeimg.pl/80x60/':''
+			categorys[2]?categorys[2].src = 'http://fakeimg.pl/90x50/':''
+			categorys.map(item=>{
+					this.imagesHeight(item.src)
+			})
 			return categorys
 		}
 	},
@@ -130,6 +138,16 @@ export default {
 		});
 	},
 	methods: {
+		async imagesHeight(src) {
+			const val = await uni.getImageInfo({
+				src
+			})
+			console.log(val[1].width)
+			this.sizeList.push({
+				width:val[1].width,
+				height:val[1].height
+			})
+		},
 		getSku(data) {
 			const { skus } = data;
 			if (!skus || skus.length == 0) {
@@ -249,7 +267,8 @@ export default {
 	
 	.imgbox {
 		height: auto;
-		width: 50%;
+		width: 100%;
+		text-align: center;
 	}
 }