From d14c8fe408eb087dadc1106d2b180f61794b6cb8 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期三, 11 九月 2024 13:48:12 +0800
Subject: [PATCH] 1.首页-下拉刷新功能实现
---
components/banner3d/banner3d.vue | 47 +++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 45 insertions(+), 2 deletions(-)
diff --git a/components/banner3d/banner3d.vue b/components/banner3d/banner3d.vue
index 4e2b8df..a4004cf 100644
--- a/components/banner3d/banner3d.vue
+++ b/components/banner3d/banner3d.vue
@@ -5,6 +5,7 @@
:autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration"
:circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
:next-margin="swiperConfig.nextMargin" @change="swiperChange" @animationfinish="animationfinish">
+
<swiper-item v-for="(item, i) in bannerList" :key="i">
<!-- 1.当前展示为第1项时，bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
<!-- 2.当前展示为最后一项时，bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
@@ -15,7 +16,12 @@
transitionDuration: '.3s',
transitionTimingFunction: 'ease'
}" :class="[curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))]">
- <image :src="item.bg" class="slide-image" />
+ <image :src="item.bg" class="slide-image">
+
+ </image>
+ <view v-if="item.currentMsg" class="top-msg" :class="[`v${i+1}`]">
+ {{item.currentMsg}}
+ </view>
<image :src="item.picture" class="icon-image" :class="[`v${i+1}`]" mode="aspectFit"></image>
<view class="container" :class="[`v${i+1}`]">
<view class="title">{{bannerList[i].title}}</view>
@@ -33,7 +39,7 @@
<view class="desc">
<span
v-if="bannerList[i].point.end">{{bannerList[i].point.current || 0}}/{{bannerList[i].point.end}},升级还需{{bannerList[i].point.end-bannerList[i].point.current}}成长值</span>
- <span v-else>成长值：{{bannerList[i].point.current || 0}}</span>
+ <span v-else>当前成长值：{{bannerList[i].point.current || 0}}</span>
</view>
</view>
</view>
@@ -133,6 +139,43 @@
z-index: 200;
position: relative;
z-index: 0;
+
+ }
+
+ .top-msg {
+ position: absolute;
+ top: 31px;
+ left: 45rpx;
+ background-color: #9DBEDF;
+ padding: 8rpx 14rpx;
+ color: #fff;
+ border-top-left-radius: 8rpx;
+ border-bottom-right-radius: 8rpx;
+ text-align: center;
+ line-height: 48rpx;
+ min-width: 132rpx;
+ z-index: 1;
+ font-size: 24rpx;
+ display: block;
+ }
+
+ .top-msg.v1 {
+ background-color: #B6D6AF;
+
+ }
+
+ .top-msg.v2 {
+ background-color: #9DBEDF;
+
+ }
+
+ .top-msg.v3 {
+ background-color: #BF9653;
+
+ }
+
+ .top-msg.v4 {
+ background-color: #F1A582;
}
.icon-image {
--
Gitblit v1.9.3