修改加载图片

main.js

@@ -4,7 +4,7 @@ import VueLazyload from 'vue-lazyload'
 
 // 添加插件配置
 Vue.use(VueLazyload, {
-  loading: './static/home/loaddata.gif', // 图片加载过程中显示的占位图
+  loading: '', // 图片加载过程中显示的占位图
   error: '/static/home/shibai.png', // 图片加载失败时显示的占位图
   attempt: 3 // 尝试加载次数
 })

pages/home/home.vue

@@ -11,12 +11,15 @@
 			</view>
 			<view class="home_1" v-if="userType!=='background'">
 				<view class="banner_area">
-					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
+					<swiper v-if="bannerList.length!=0" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
 						<swiper-item v-for="(item, index) in bannerList" :key="index">
 							<!-- <image :src="item.image" mode=""></image> -->
 							<img v-lazy="item.image" />
 						</swiper-item>
 					</swiper>
+					<view v-else class="loader_image">
+						<view class="loader"></view>
+					</view>
 				</view>
 				<view class="notice" @click="toUrl('notice')" v-if="notice.title">
 					<text class="notice_t">公告：</text>
@@ -38,7 +41,10 @@
 				</view>
 				<view class="">
 					<view v-for="(item,index) in typeGoodsList" :key="index" class="dis-flex-between-center goods-item ">
-						<view class="">
+						<view v-if="showimg==true" class="loader-cover_image">
+							<view class="loader"></view>
+						</view>
+						<view class="" v-else>
 							<!-- <image :src="item.cover_image" mode="aspectFill"></image> -->
 							<img v-lazy="item.cover_image" />
 						</view>
@@ -255,7 +261,8 @@
 				  ]
 				},
 				// 1#endif
-				showSkeleton: true
+				showSkeleton: true,
+				showimg:true
 			}
 		},
 		components: {
@@ -328,9 +335,15 @@
 				if(this.valueType=="面值"){
 					data = {};
 				}
+				if(this.typeGoodsList.length==0){
+					this.showimg = true
+				}
 				API.getGoodsList(data, res=>{
 					// console.log(res);
-					this.typeGoodsList = res.data;
+						this.typeGoodsList = res.data;
+						setTimeout(()=>{
+							this.showimg = false
+						},300)
 				})
 			},
 			/*  */
@@ -455,7 +468,7 @@
 				API.getRotationChart({
 					page:1, limit: 10
 				}, res=>{
-					this.bannerList = res.data.list;
+						this.bannerList = res.data.list;
 					// console.log(res.data,11111);
 				})
 			},
@@ -610,6 +623,29 @@
 </script>
 
 <style lang="scss" scoped>
+	.loader {
+	  width: 50px;
+	    --b: 8px; 
+	    aspect-ratio: 1;
+	    border-radius: 50%;
+	    padding: 1px;
+	    background: conic-gradient(#0000 10%,#000000) content-box;
+	    -webkit-mask:
+	      repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
+	      radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
+	    -webkit-mask-composite: destination-in;
+	            mask-composite: intersect;
+	    animation:l4 1s infinite steps(10);
+	  }
+	  @keyframes l4 {to{transform: rotate(1turn)}
+	}
+	.loader-cover_image{
+		width: 138px;height: 88px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
+	}
+	.loader_image{
+		width: 700rpx;height: 300rpx;display: flex;justify-content: center;align-items: center;
+	}
+	
 .dis-flex{
 	display: flex;
 }
@@ -702,6 +738,7 @@
 		}
 	}
 }
+
 .home_1{
 	.banner_area{
 		padding: 20px 0px;
@@ -715,7 +752,7 @@
 		// 	border-radius: 10px;
 		// 	overflow: hidden;
 		// }
-		img{
+		  img{
 			width: 700rpx;
 			height: 300rpx;
 			border-radius: 10px;