swiper

config/webpack.common.config.js

@@ -89,7 +89,7 @@ module.exports = function (isProd) {
                 {
                     test: cssReg,
                     use: styleLoader(),
-                    include: sparkConfig.SOURCE_DIR,
+                    // include: sparkConfig.SOURCE_DIR,
                 },
                 {
                     test: /\.(js|jsx)$/,
@@ -162,7 +162,7 @@ module.exports = function (isProd) {
             moduleIds: "hashed",
             splitChunks: {
                 chunks: "all",
-                minSize: 30000, //小于这个限制的会打包进Main.js
+                minSize: 30000, // 小于这个限制的会打包进Main.js
                 cacheGroups: {
                     vendors: {
                         test: /[\\/]node_modules[\\/]/,

package.json

@@ -38,6 +38,7 @@
     "rimraf": "^3.0.2",
     "spark-utils": "^0.0.12",
     "style-loader": "^1.2.1",
+    "swiper": "^8.4.4",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "devDependencies": {

src/app.jsx

@@ -10,12 +10,16 @@ import Modal from './modal/modal';
 import './utils/checkWebp';  // webp检查
 import MD from '../MD'; // 埋点
 MD();
+import SwiperCore, { Autoplay } from 'swiper';
+SwiperCore.use([Autoplay]);
 
 // 此处为spark-cli动态生成
 import LoadingDemo from "@src/pages/loadingDemo/loadingDemo";
 import HomeDemo from "@src/pages/homeDemo/homeDemo";
 import CircleTurntableDemo from "./pages/CircleTurntableDemo/CircleTurntableDemo";
 import Collect from "./pages/Collect";
+import SwiperC from "./pages/SwiperC";
+
 
 /**
  * 所有页面场景
@@ -24,7 +28,8 @@ export const pageMap = {
   loading: <LoadingDemo />,
   homePage: <HomeDemo/>,
   CircleTurntableDemo:<CircleTurntableDemo />,
-  Collect:<Collect/>
+  Collect:<Collect/>,
+  SwiperC:<SwiperC />
 }
 
 @observer

src/pages/SwiperC/index.jsx

+import React from "react";
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/swiper.less';
+import './index.less'
+
+const SwiperC = () => {
+  const prizeInfo = Array(12).fill(' ').map((_, i) => {
+    return {
+      "prizeName": "奖品名称奖品名称" + i,
+      // eslint-disable-next-line @spark/best-practices/no-url-in-js
+      "prizeUrl": "//yun.duiba.com.cn/aurora/assets/8e42586a6b47b99dde89e46c4740ad3e3e4ec98b.png"
+    }
+  })
+  return (
+    <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>
+          )
+        }) : ""
+      }
+
+    </Swiper>)
+}
+
+export default SwiperC
\ No newline at end of file

src/pages/SwiperC/index.less

+.prize-swiper {
+  margin-top: 72px;
+}
+.prize {
+  width: 100%;
+  // margin-top: 15px;
+  .bg-box {
+    margin: auto;
+    display: block;
+    width: 146px;
+    height: 146px;
+    border-radius: 15px;
+    // background: #fff no-repeat top left / 100% 100%;
+    object-fit: contain;
+  }
+  .font {
+    margin:auto;
+    margin-top:10px;
+    margin-bottom:10px;
+    display: block;
+    width: 146px;
+    text-align: center;
+    font-size: 24px;
+    color: #018e7c;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
\ No newline at end of file

src/utils/constants.js

 /*
  * @Author: super
  * @Date: 2021-01-20 14:08:27
- * @LastEditTime: 2022-11-01 16:52:28
+ * @LastEditTime: 2022-11-01 17:08:23
  * @LastEditors: Please set LastEditors
  * @Description: 
  */
@@ -38,5 +38,6 @@ export function ERROR_MESSAGE(errorCode) {
 
 export const all_page = [
   { name: '原型转盘', page: 'CircleTurntableDemo' },
-  { name: '金币收集动效', page: 'Collect' }
+  { name: '金币收集动效', page: 'Collect' },
+  { name: '普通轮播', page: 'SwiperC' }
 ]