图片懒加载

mallApp/src/pages/home/components/go-login.vue

@@ -5,7 +5,6 @@
         </div>
 	</alert-module>
 </template>
-
 <script>
 import AlertModule from '@/components/plugin/alert'
 export default {
@@ -26,7 +25,6 @@ export default {
 	},
 	watch: {
 		show(val) {
-		    console.log('监听')
 			this.showAlert = val
 		}
 	},
@@ -41,6 +39,5 @@ export default {
 	}
 }
 </script>
-
 <style lang="scss" scoped>
 </style>

mallApp/src/pages/home/components/goods-list-big.vue

@@ -8,24 +8,9 @@
 		</div>
 		<div class="goods-wrap">
 			<block>
-				<div 
-					class="goods-list" 
-					v-for="(item, index) in info.goodsInfoList" 
-					:key="index" @click="pageTo({
-					url: '/pages/goods/detail',
-					query: {
-						id: item.id
-					}
-				})">
-					<div 
-						class="goods-img">
-
-				<image 
-					class="app-img" 
-					:src="item.imgList[0]" 
-					mode="aspectFit" 
-					style="height:713rpx;" ></image>
-
+				<div class="goods-list" v-for="(item, index) in info.goodsInfoList" :key="index" @click="pageTo({ url: '/pages/goods/detail', query: { id: item.id } })">
+					<div class="goods-img">
+						<image class="app-img" :src="item.imgList[0]" mode="aspectFit" style="height:713rpx;" lazy-load="true" :lazy-load-margin="0"></image>
 					</div>
 					<div class="goods-det">
 						<div class="goods-left">
@@ -39,7 +24,6 @@
 		</div>
 	</div>
 </template>
-
 <script>
 import AppImg from '@/components/app-img'
 export default {

mallApp/src/pages/home/components/goods-list-middle.vue

@@ -9,7 +9,7 @@
 		<div class="goods-wrap">
 			<div class="goods-list" v-for="(item, index) in info.goodsInfoList" :key="index" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">
 				<div class="goods-img">
-					<img :src="item.img" alt="商品图片" mode="aspectFit" style="width:100%" />
+					<image :src="item.img" mode="aspectFit" style="width:100%" lazy-load="true" :lazy-load-margin="0" ></image>
 				</div>
 				<div class="goods-det">
 					<div class="goods-left">
@@ -68,10 +68,9 @@ export default {
 				margin-top: 0;
 			}
 			.goods-img {
-				// width: 346px;
 				width: 100%;
 				height: 346px;
-				img {
+				image {
 					height: 100%;
 				}
 			}

mallApp/src/pages/home/components/goods-list-small.vue

@@ -7,13 +7,9 @@
 			</div>
 		</div>
 		<div class="goods-wrap">
-			<div 
-				class="goods-list" 
-				v-for="(item, index) in info.goodsInfoList" 
-				:key="index" 
-				@click="pageTo(`/pages/goods/detail?id=${item.id}`)">
+			<div class="goods-list" v-for="(item, index) in info.goodsInfoList" :key="index" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">
 				<div class="goods-img">
-					<app-img :src="item.smallImgList[0]" alt="商品图片" mode="aspectFit" style="width:100%" />
+					<app-img :src="item.smallImgList[0]" mode="aspectFit" style="width:100%" />
 				</div>
 				<div class="goods-det">
 					<div class="goods-left">
@@ -50,16 +46,6 @@ export default {
 
 <style lang="scss" scoped>
 	.goods-list-small-module {
-		// .title-tag {
-		// 	.title-text {
-		//         font-size: 38px;
-		//         text-align: center;
-		//     }
-		//     .title-img {
-		//         width: 296px;
-		//         margin: 10px auto 48px;
-		//     }
-		// }
 		.title-tag {
 			position: relative;
 			.title-text {
@@ -105,4 +91,4 @@ export default {
 			}
 		}
 	}
-</style>
+</style>

mallApp/src/pages/home/components/login-popup.vue

@@ -66,7 +66,6 @@
     </div>
   </bottom-popup>
 </template>
-
 <script>
 import AppStep from "@/components/app-step";
 import BottomPopup from "@/components/plugin/bottom-popup";