图书 文物

pages/book/index.vue

@@ -14,8 +14,9 @@
 					</view>
 				</swiper-item>
 			</swiper> -->
-			<u-swiper :list="bookList" :effect3d="true" :circular="true" :indicator="true"
-			 img-mode="widthFix" effect3d-previous-margin="140" :autoplay="false"></u-swiper>
+			<u-swiper @change="changeSwiper" :class="{'opacity0':addOpcity}" :list="bookList" :effect3d="true"
+				:circular="true" :indicator="true" img-mode="widthFix" effect3d-previous-margin="140"
+				:autoplay="false"></u-swiper>
 
 		</view>
 
@@ -39,7 +40,8 @@
 				navBarTop: 0,
 				bookList: [],
 				bookIndex: 0,
-				swiperHeight: 0
+				swiperHeight: 0,
+				addOpcity: true
 
 			}
 		},
@@ -68,6 +70,10 @@
 			});
 		},
 		methods: {
+			changeSwiper(e) {
+				console.log(e)
+				this.addOpcity = false
+			},
 			changeBook(e) {
 				console.log(e)
 				this.bookIndex = e.detail.current
@@ -81,8 +87,8 @@
 					data: {
 						page: 1,
 						page_size: 99,
-						sort_name:'datetime',
-						sort_type:"ASC",
+						sort_name: 'datetime',
+						sort_type: "ASC",
 					},
 					success: function(res) {
 						console.log("res", res)
@@ -95,6 +101,7 @@
 							})
 						})
 						that.bookList = arr
+						that.addOpcity = true
 						console.log(that.bookList)
 					},
 					fail: function(res) {
@@ -126,27 +133,37 @@
 
 			swiper {
 				height: calc(100vh - 550rpx) !important;
-				background-color: transparent!important;
+				background-color: transparent !important;
+
 				image {
 					height: 85%;
 
 				}
 			}
-			::v-deep .u-swiper-wrap{
-				height:100%;
+
+			::v-deep .u-swiper-wrap {
+				height: 100%;
 			}
-			::v-deep .u-swiper-indicator{
-				bottom:150rpx!important;
+
+			::v-deep .u-swiper-indicator {
+				bottom: 150rpx !important;
 			}
-			::v-deep .u-list-image-wrap{
+
+			::v-deep .u-list-image-wrap {
 				// background-color: #fff;
 			}
-			::v-deep .u-swiper-image{
-				    position: absolute;
-				    top: 50%;
-				    left: 50%;
-				    transform: translate(-50%,-50%) scale(1.7);
+
+			.opacity0 swiper swiper-item:last-child {
+				opacity: 0;
+			}
+
+			::v-deep .u-swiper-image {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%) scale(1.7);
 			}
+
 			::v-deep .u-swiper-title {
 				height: 15%;
 				display: flex;
@@ -161,9 +178,11 @@
 				text-align: center;
 
 			}
-			::v-deep .u-indicator-item-round-active{
+
+			::v-deep .u-indicator-item-round-active {
 				background-color: #9f4946;
 			}
+
 			&-item {
 				padding: 0 30rpx;
 				// transform: scale(.7);