文字轮播

README.md

@@ -18,5 +18,5 @@
 
 **金币收集动效：[Collect](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/pages/Collect/index.jsx)**
 
-**普通轮播：[SwiperC](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/pages/SwiperC/index.jsx)**
+**普通轮播(奖品和文字轮播)：[SwiperC](http://gitlab2.dui88.com/wangqiang1/best-code/blob/master/src/pages/SwiperC/index.jsx)**
 

src/pages/SwiperC/index.jsx

+import { Marquee } from "@spark/ui";
 import React from "react";
 import { Swiper, SwiperSlide } from 'swiper/react';
 
@@ -13,38 +14,53 @@ const SwiperC = () => {
     }
   })
   return (
-    <Swiper
-      className="prize-swiper"
-      // spaceBetween={10}
-      slidesPerView={3}
-      // slidesOffsetAfter={65}
-      autoplay={
-        {
-          delay: 3000,
-          disableOnInteraction: false,
+    <div>
+      <p>奖品轮播：</p>
+      <Swiper
+        className="prize-swiper"
+        // spaceBetween={10}
+        slidesPerView={3}
+        // slidesOffsetAfter={65}
+        autoplay={
+          {
+            delay: 3000,
+            disableOnInteraction: false,
+          }
         }
-      }
-      initialSlide={0}
-      // centerInsufficientSlides={prizeInfo.length <= 3}
-      centeredSlidesBounds={true}
-      observer
-      loop={prizeInfo.length > 3}
-    >
-      {prizeInfo.length ?
-        prizeInfo.map((item, index) => {
-          const { prizeName,prizeUrl } = item || {}
-          return (
-            <SwiperSlide key={index + 'swiper-1'}>
-              <div className="prize">
-                <img className="bg-box" src={prizeUrl} alt=''></img>
-                <span className="font"> {prizeName}</span>
-              </div>
-            </SwiperSlide>
-          )
-        }) : ""
-      }
+        initialSlide={0}
+        // centerInsufficientSlides={prizeInfo.length <= 3}
+        centeredSlidesBounds={true}
+        observer
+        loop={prizeInfo.length > 3}
+      >
+        {prizeInfo.length ?
+          prizeInfo.map((item, index) => {
+            const { prizeName, prizeUrl } = item || {}
+            return (
+              <SwiperSlide key={index + 'swiper-1'}>
+                <div className="prize">
+                  <img className="bg-box" src={prizeUrl} alt=''></img>
+                  <span className="font"> {prizeName}</span>
+                </div>
+              </SwiperSlide>
+            )
+          }) : ""
+        }
+
+      </Swiper>
+      <p>文字轮播:</p>
+      <div className="Marquee" >
+        <Marquee
+          baseData={Array(10).fill('').map((_, i) => '奖品轮播啊啊啊啊' + i)}
+          time={2000}
+          renderItem={(s) => {
+            return <div>{s}</div>
+          }}
+        />
+      </div>
 
-    </Swiper>)
+    </div>
+  )
 }
 
 export default SwiperC
\ No newline at end of file

src/pages/SwiperC/index.less

+
+.Marquee {
+  width: 300px;
+  height: 100px;
+}
 .prize-swiper {
   margin-top: 72px;
 }