add:scrollxview

c_client/src/components/_tb_comps/ScrollXView/ScrollXView.jsx

@@ -15,7 +15,8 @@ function ScrollXView(props) {
         isShowPrizeName=true,
         prizeInCenterNum=2,
         marginRight=26,
-        backgroundColor='#E7E7EF'
+        backgroundColor='#E7E7EF',
+        backgroundImage=''
     } = props
 
     const showPrize = classnames(styles['show-pize-box'],{
@@ -28,7 +29,7 @@ function ScrollXView(props) {
             <ScrollView scrollX className={styles['scroll-x-box']}>
                 {<View className={showPrize}>
                     {
-                        prizeList.map((itm,i) => {
+                        prizeList.length > 0 && prizeList.map((itm,i) => {
                             return(
                                 <View 
                                     key={'prize'+i}
@@ -36,6 +37,7 @@ function ScrollXView(props) {
                                     style={{ 
                                         width:`${containerWidth/100}rem`,
                                         height:`${containerHeight/100}rem`,
+                                        backgroundImage:`${backgroundImage}`,
                                         backgroundColor:backgroundColor,
                                         marginRight:`${((prizeList.length > prizeInCenterNum) &&(prizeList.length - 1) !== i) ? `${marginRight/100}rem` : ''}`
                                     }} 
@@ -62,7 +64,6 @@ function ScrollXView(props) {
                                             className={styles['pirze__item-name']}
                                             style={{
                                                 height:`${60/100}rem`,
-                                                // lineHeight:`${60/100}rem`,
                                                 fontSize:`${24/100}rem`
                                             }}
                                         >{itm.name}</View>

c_client/src/components/_tb_comps/ScrollXView/ScrollXView.md

@@ -12,7 +12,8 @@
 | isShowPrizeName    |   Boolean   |    是否展示奖品名称   |  true  | true:展示  false:不展示 |
 | prizeInCenterNum    |   Number   |    奖品少于n个时居中展示   |  n=2  | 多于n个,可滑动查看 |
 | marginRight    |   Number   |    奖品容器之间间距   |  26  | px |
-| backgroundColor    |   Number   |    奖品容器背景颜色   |  #E7E7EF  | / |
+| backgroundColor    |   String   |    奖品容器背景颜色   |  #E7E7EF  | / |
+| backgroundImage    |   String   |    奖品容器背景图   |  ''  | 默认为空 |
 
 + prizeList数组格式
 ```json
@@ -29,7 +30,7 @@
 + 使用
 ```jsx
     import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
-    // 组件不一定在该目录下,举例说明一下
+    // 组件不一定在该目录下,仅做举例引入
 
     const SCROLLXVIEW_CONFIG = {  //不传走默认配置
         prizeList: [], 
@@ -40,7 +41,8 @@
         isShowPrizeName:true,
         prizeInCenterNum:2,
         marginRight:26,
-        backgroundColor:'#E7E7EF'
+        backgroundColor:'#E7E7EF',
+        backgroundImage:''
     }
 
     export const Index = () => {

c_client/src/components/_tb_comps/ScrollXView/ScrollXView.module.less

@@ -23,6 +23,8 @@
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
+
+    .image-property(cover, center center);
 }
 // .show-pirze__item:last-child {
 //     margin-right: 26px;

c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx

@@ -24,7 +24,12 @@ const SwiperView = (props) => {
     vertical=false,
     duration=1000,
     interval=1500,
-    disableTouch=false
+    disableTouch=false,
+    swiperGroup={width:300,height:400},
+    swiperContent={width:300,height:400},
+    imgContent={width:200,height:200},
+    textContent={width:300,height:60},
+    showLeftRightBtn=true
   } = props;
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -57,6 +62,7 @@ const SwiperView = (props) => {
 
   return (
     <View className="scroll_container">
+      {/* <View className='left_btn' >&lt;&lt;</View> */}
       <Swiper
         className="swiper_group"
         current={currentIndex}
@@ -68,12 +74,21 @@ const SwiperView = (props) => {
         duration={duration}
         interval={interval}
         disableTouch={disableTouch}
+        style={{
+          width:`${swiperGroup.width/100}rem`,
+          height:`${swiperGroup.height/100}rem`
+        }}
       >
         {swiperList.length &&
           swiperList.map((item, i) => (
             <SwiperItem>
               <View
                 className={`scroll_item ${i === currentIndex && isSpecial ? "current_item" : ""} ${useCustomAni(i)}`}
+                style={{
+                  width:`${swiperContent.width/100}rem`,
+                  height:`${swiperContent.height/100}rem`
+                }}
+                onTap={()=>getCurrentDetail(item)}
               >
                 {/* {i === currentIndex &&  (
                   <Image
@@ -86,8 +101,8 @@ const SwiperView = (props) => {
                   <Image 
                     className="img" 
                     style={{
-                      width:`${400/100}rem`,
-                      height:`${240/100}rem`
+                      width:`${imgContent.width/100}rem`,
+                      height:`${imgContent.height/100}rem`
                     }} 
                     src={item.image}></Image>
                   {
@@ -95,24 +110,21 @@ const SwiperView = (props) => {
                     <View 
                       className='text_content'
                       style={{
-                        width:'100%',
-                        height:`${160/100}rem`
+                        width:`${textContent.width/100}rem`,
+                        height:`${textContent.height/100}rem`,
+                        padding:`${0/100}rem ${16/100}rem`
                       }}
                     >
                       <View className='text' >{item.content}</View>
                     </View>
                   }
-                  {
-                    item?.hasBtn &&
-                    <View className='item_btn' >
-                      <View className='right_btn' onTap={()=>getCurrentDetail(item)}>按钮{i}</View>
-                    </View>
-                  }
                 </View>
               </View>
             </SwiperItem>
           ))}
       </Swiper>
+      
+      {/* <View className='right_btn' >&gt;&gt;</View> */}
     </View>
   );
 };

c_client/src/components/_tb_comps/SwiperView/SwiperView.less

 
 .scroll_container{
     width: 450px;
-    margin: 300px auto 0;
+    margin: 0 auto;
     overflow: hidden;
 
     .swiper_group {
         margin: 0 auto;
-        width: 450px;
-        overflow: visible;
+        overflow: hidden;
         position: relative;
         swiper-item {
-            width: 450px;
+            width: 300px;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .scroll_item {
-          width: 400px;
+          width: 300px;
           margin: 0 auto;
           position: relative;
           border-radius: 20px;
@@ -31,9 +30,9 @@
           }
           .item_img_content {
             width: 100%;
-            // padding: 20px;
             .img {
-              margin: 20px auto 0;
+              margin: 20px auto 10px;
+              display: block;
               border-radius: 20px;
               background-repeat: no-repeat;
               background-position: top center;
@@ -41,33 +40,10 @@
             .text_content{
               margin: 0 auto;
               box-sizing: border-box;
-              padding: 16px;
-              display: flex;
-              justify-content: center;
-              align-items: center;
               .text{
                 color: #232323;
                 text-align: center;
                 font-size: 24px;
-                padding: 16px;
-
-              }
-            }
-            .item_btn{
-              width: 100%;
-              .right_btn{
-                // background-image: url('https://yun.duiba.com.cn/spark/assets/33bc06a1be4bf250345e24900bc5719992328d4e.png');
-                // .image-property(cover, center center);
-                width: 200px;
-                height: 65px;
-                margin: 0 auto;
-                border-radius: 40px;
-                border: 2px solid rgb(79, 172, 118) ;
-                text-align: center;
-                line-height: 65px;
-                font-size: 26px;
-
-                // animation: scales 2s infinite;
               }
             }
           }
@@ -77,9 +53,6 @@
                 .text_content{
                     .text{}
                 }
-                .item_btn{
-                    .right_btn{}
-                }
             }
           }
 

c_client/src/components/_tb_comps/SwiperView/SwiperView.md

@@ -10,7 +10,10 @@
 | duration   |   Number   |  滑动动画时长| 1000 |/|
 | interval   |   Number   |  自动切换时间间隔| 1500 |/|
 | easingFunction|String   |  缓动动画类型| linear |'default','linear'  'easeInCubic'     'easeOutCubic'  'easeInOutCubic'|
-
+| swiperGroup   |   Object   | 整个swiper的宽高 |{width:300,height:400}|/|
+| swiperContent   |   Object   | 单个swiperItem的宽高 |{width:300,height:400}|/|
+| imgContent   |   Object   | 图片宽高 |{width:200,height:200}|/|
+| textContent   |   Object   | 文本宽高 |{width:300,height:60}|/|
 
 #### swiperList数据
 ```json
@@ -18,7 +21,6 @@
         {
             "image":"",//图片链接,图片宽高需要在less中修改
             "content":"",//图片描述
-            "hasBtn":"",//注入数据(是否有按钮)
             // 或者手动修改组件中的字段名称 ...
         },
       	// ...
@@ -38,7 +40,11 @@ const swiperConfig = { //不传走默认配置
     vertical:false,
     duration:1000,
     interval:1500,
-    disableTouch:false
+    disableTouch:false,
+    swiperGroup:{width:300,height:400},
+    swiperContent:{width:300,height:400},
+    imgContent:{width:200,height:200},
+    textContent:{width:300,height:60}
   }
 
 export const Index = () => {

c_client/src/const.js

@@ -196,7 +196,6 @@ export const prizeList = [
       "https://yun.duiba.com.cn/spark/assets/554a90eee5a31ae7628950907974bdee2da8c01e.png",
       name:'商品描述商品描述商品描述商品描述商品描述8',
       content:'商品描述商品描述商品描述商品描述商品描述8'
-
   }
 ];
 

c_client/src/pages/index/index.jsx

@@ -53,14 +53,29 @@ const rotateConfig = {
 
 const SCROLLXVIEW_CONFIG = {
   prizeList: [], 
-  containerWidth : 300, 
-  containerHeight : 300,
-  imgWidth:200,
-  imgHeight:200,
+  containerWidth : 200, 
+  containerHeight : 200,
+  imgWidth:120,
+  imgHeight:120,
   isShowPrizeName:true,
-  prizeInCenterNum:2,
+  prizeInCenterNum:3,
   marginRight:26,
-  backgroundColor:'#E7E7EF'
+  backgroundColor:'#E7E7EF',
+  backgroundImage:''
+}
+
+const swiper_config = {
+    easingFunction:`linear`,
+    circular:true,
+    autoplay:true,
+    vertical:false,
+    duration:1000,
+    interval:1500,
+    disableTouch:false,
+    swiperGroup:{width:300,height:400},
+    swiperContent:{width:300,height:400},
+    imgContent:{width:200,height:200},
+    textContent:{width:300,height:60}
 }
 
 
@@ -210,11 +225,11 @@ function Index() {
       {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
 
       {/* swiper左右滑动 */}
-      {/* <SwiperView  swiperList={prizeList} /> */}
+      {/* <SwiperView {...swiper_config}  swiperList={prizeList} /> */}
 
 
       {/* 大转盘 */}
-      {/* <View className={styles['rotate']} 
+      <View className={styles['rotate']} 
         style={{
           width:`${600/100}rem`,
           height:`${600/100}rem`,
@@ -224,7 +239,7 @@ function Index() {
           alignItems:'center'
         }} >
         <RotateWheel {...rotateConfig} callback={()=>{}} />
-      </View> */}
+      </View>
 
       <View className='view' onTap={playCurrentAudio}>play audio</View>