feat：头像低于滚动状态下，漂浮动作仍然继续

src/components/avatorSwiper.vue

@@ -48,18 +48,17 @@ export default {
     const autoplay = isLoop ? { delay: 3000 } : false;
     return {
       timer: null,
+      interTimer: null,
       isLoop,
       isAddClass: false,
       rightImgPath: '',
       leftImgPath: '',
-      avatorItem: null,
       defaultImg: 'https://himg.bdimg.com/sys/portraitn/item/19e96973556e646566696e6564d8bcc080',
       swiperOptions: {
         loop: isLoop,
         initialSlide: 0,
         slidesPerView: 9,
         // spaceBetween: 4,
-        // cssMode: true,
         speed: 800,
         centeredSlides: isLoop,
         centeredSlidesBounds: true,
@@ -73,7 +72,6 @@ export default {
             const activeIndex = this.activeIndex;
             const slideLeft = this.slides.eq(activeIndex - 5);
             const slideRight = this.slides.eq(activeIndex + 4);
-            vm.avatorItem = vm.getAvatorItem(slideRight);
             vm.leftImgPath = slideLeft.data('src');
             vm.rightImgPath = slideRight.data('src');
             slideLeft.addClass('ani-opt');
@@ -81,7 +79,7 @@ export default {
             vm.isAddClass = true;
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              vm.$store.dispatch('goods_avator_info', { ...vm.avatorItem, showInfo: true });
+              vm.oneTransLate(vm.getAvatorItem(slideRight));
               clearTimeout(vm.timer);
             }, 1000);
           },
@@ -102,34 +100,43 @@ export default {
     }
   },
   mounted() {
-    if (!this.isLoop) {
-      this.oneTransLate();
+    const avatorData = this.avatorData;
+    if (!this.isLoop && avatorData.length) {
+      this.startTimeoutAvatar(avatorData);
     }
   },
   beforeDestroy() {
     this.$store.dispatch('goods_avator_info', { showInfo: false });
     clearTimeout(this.timer);
+    clearInterval(this.interTimer);
   },
   methods: {
-    oneTransLate() {
-      const avatorData = this.avatorData;
-      const imgItem = avatorData[avatorData.length - 1];
-      const lastItem = { src: imgItem.avatar, name: imgItem.name, showInfo: true };
-      this.$store.dispatch('goods_avator_info', lastItem);
+    oneTransLate(avatorItem) {
+      this.$store.dispatch('goods_avator_info', {
+        ...{ src: avatorItem.avatar, name: avatorItem.name },
+        showInfo: true
+      });
     },
-    // setTranslate() {
-    //   const slides = this.swiper.slides;
-    //   for (let i = 0; i < slides.length; i++) {
-    //     const slide = slides.eq(i);
-    //     const progress = slides[i].progress;
-    //     slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
-    //   }
-    // },
     getAvatorItem(ele) {
       return {
         src: ele.data('src') || '',
         name: ele.data('name') || ''
       };
+    },
+    startTimeoutAvatar(avatorData) {
+      const avatorLength = avatorData.length - 1;
+      let count = avatorLength;
+      this.oneTransLate(avatorData[count]);
+      this.interTimer = setInterval(() => {
+        count--;
+        this.swiperOptions.on.slideChangeTransitionStart();
+        if (count < 0) count = avatorLength;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.oneTransLate(avatorData[count]);
+          clearTimeout(this.timer);
+        }, 800);
+      }, 3000);
     }
   }
 };

src/components/groupShare.vue

@@ -227,7 +227,6 @@ export default {
       });
     },
     appShareEventChange() {
-      alert(JSON.stringify(this.shareInfo.imgUrl));
       const { title, desc, link, imgUrl, posterUrl } = this.shareInfo;
       // 进行App分享
       const data = {

src/components/groupSwiper.vue

@@ -17,7 +17,7 @@
     <div v-if="isLoop" class="avator_right avator-swiper_item">
       <img :src="rightImgPath" />
     </div>
-    <span class="avator-swiper-bg" :style="{ backgroundColor: bgColor }">&nbsp;</span>
+    <span class="avator-swiper-bg" :style="{ backgroundColor: bgColor }" />
   </div>
 </template>
 <script>
@@ -48,18 +48,16 @@ export default {
     const autoplay = isLoop ? { delay: 1500, reverseDirection: true } : false;
     return {
       timer: null,
+      interTimer: null,
       isLoop,
       isAnimate: false,
       leftImgPath: '',
       rightImgPath: '',
-      avatorItem: null,
       defaultImg: 'https://himg.bdimg.com/sys/portraitn/item/19e96973556e646566696e6564d8bcc080',
       swiperOptions: {
         loop: isLoop,
         initialSlide: 0,
         slidesPerView: 7,
-        // spaceBetween: 8,
-        // cssMode: true,
         speed: 600,
         centeredSlides: isLoop,
         centeredSlidesBounds: true,
@@ -73,7 +71,6 @@ export default {
             const activeIndex = this.activeIndex,
               slideLeft = this.slides.eq(activeIndex - 3),
               slideRight = this.slides.eq(activeIndex + 4);
-            vm.avatorItem = vm.getAvatorItem(slideLeft);
             vm.isAnimate = true;
             vm.rightImgPath = slideRight.data('src');
             vm.leftImgPath = slideLeft.data('src');
@@ -81,7 +78,7 @@ export default {
             slideRight.addClass('ani-opt');
             clearTimeout(vm.timer);
             vm.timer = setTimeout(() => {
-              vm.$emit('animation-event-end', vm.avatorItem);
+              vm.oneTransLate(vm.getAvatorItem(slideLeft));
               clearTimeout(vm.timer);
             }, 800);
           },
@@ -102,23 +99,39 @@ export default {
     }
   },
   mounted() {
-    if (!this.isLoop) {
-      this.oneTransLate();
+    const avatorData = this.avatorData;
+    if (!this.isLoop && avatorData.length) {
+      this.startTimeoutAvatar(avatorData);
     }
   },
   destroyed() {
     clearTimeout(this.timer);
+    clearInterval(this.interTimer);
   },
   methods: {
-    oneTransLate() {
-      const [fristItem] = this.avatorData;
+    oneTransLate(fristItem) {
       this.$emit('animation-event-end', { src: fristItem.avatar, name: fristItem.name });
     },
     getAvatorItem(ele) {
       return {
-        src: ele.data('src'),
+        avatar: ele.data('src'),
         name: ele.data('name')
       };
+    },
+    startTimeoutAvatar(avatorData) {
+      const avatorLength = avatorData.length;
+      let count = 0;
+      this.oneTransLate(avatorData[count]);
+      this.interTimer = setInterval(() => {
+        count++;
+        this.swiperOptions.on.slideChangeTransitionStart();
+        if (count >= avatorLength) count = 0;
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.oneTransLate(avatorData[count]);
+          clearTimeout(this.timer);
+        }, 800);
+      }, 2000);
     }
   }
 };

src/views/goodsList/index.vue

@@ -310,14 +310,34 @@ async function getActivityList(urlQuery, next) {
     // t.startTime = '2021-09-23 10:45:00';
     // t.endTime = '2021-09-23 19:17:20';
     t = await computedTemplate(t);
-    t.groupBuyUserInfoList = (t.groupBuyUserInfoList || []).reverse();
-    // t.groupBuyUserInfoList = [
-    //   { avatar: 'https://avatar.q-gp.com/14612340001/ee8991d0-1d38-11ec-b6f6-bf45b18f0626' },
-    //   {
-    //     avatar:
-    //       'https://thirdwx.qlogo.cn/mmopen/vi_32/LF7hK1yuMnxUAnx4YmjPyJCn0WqwVMplgTnDSBwwOib5uHP9fQazPf7xRXCUNEfI8sicf7boaCNoD2NUss2k7jFg/132'
-    //   }
-    // ];
+    // t.groupBuyUserInfoList = (t.groupBuyUserInfoList || []).reverse();
+    t.groupBuyUserInfoList = [
+      {
+        name: '皱眉',
+        avatar:
+          'https://img.lkbang.net/avator/0c8c1cfeb1cfdfffd77ac74af83377a17812a3585027-OKt5j9_fw658.jpeg'
+      },
+      {
+        name: '空白人生',
+        avatar:
+          'https://img.lkbang.net/avator/e684de0d4db0fcd3a04945ff7ed394abb678ce577dba5-VJbncW_fw658.jpeg'
+      },
+      {
+        name: '逅黄昏',
+        avatar:
+          'https://img.lkbang.net/avator/900b3be08740dbe4e38f7c3b7a73b613538a2f2edac3-yXzWfB_fw658.jpeg'
+      },
+      {
+        name: '桑过后正年轻',
+        avatar:
+          'https://img.lkbang.net/avator/7ca48321827385f386d0317a40d3f6201f442fddf99a-xXvv37_fw658.jpeg'
+      },
+      {
+        name: '年少就是不服输',
+        avatar:
+          'https://img.lkbang.net/avator/e33db7b617e42367d888e3821e1acd89b4b20319cb42-esiOS3_fw658.jpeg'
+      }
+    ];
     // store.dispatch('save_openlink_host', t.openLink);
     store.commit('CHANGE_TITLE', t.title || '活动页');
     nextFns(vm => {