scrollx_view

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

@@ -4,24 +4,69 @@ import Taro, { useShareAppMessage, useDidShow } from '@tarojs/taro'
 import classnames from 'classnames'
 import styles from './ScrollXView.module.less'
 
+
 function ScrollXView(props) {
-    const { prizeList = [], marginRight = 26, width = 300, height = 300 } = props
+    const { 
+        prizeList = [], 
+        containerWidth = 300, 
+        containerHeight = 300,
+        imgWidth=240,
+        imgHeight=240,
+        isShowPrizeName=true,
+        prizeInCenterNum=2,
+        marginRight=26,
+        backgroundColor='#E7E7EF'
+    } = props
 
     const showPrize = classnames(styles['show-pize-box'],{
-        [`${styles['show-pize-box__two']}`]: prizeList.length === 1
+        [`${styles['show-pize-box__two']}`]: prizeList.length <= prizeInCenterNum,
+        [`${styles['show-pize-box__more']}`]: prizeList.length > prizeInCenterNum,
     })
+
     return (
         <>
             <ScrollView scrollX className={styles['scroll-x-box']}>
-                {<View className={showPrize} style={prizeList.length > 1?{width: (prizeList.length * width + (prizeList.length) * marginRight + 100) / 100 + 'rem'}: { width: '100%'}}>
+                {<View className={showPrize}>
                     {
-                        prizeList.map(itm => {
+                        prizeList.map((itm,i) => {
                             return(
-                                <View style={{ width: width / 100 +'rem',height: height / 100 +'rem'}} className={styles['show-pirze__item']}>
-                                    <View className={styles['pirze__item-img']}>
-                                        <Image src={itm.image} className={styles['pirze__item-img-icon']} />
+                                <View 
+                                    key={'prize'+i}
+                                    className={styles['show-pirze__item']} 
+                                    style={{ 
+                                        width:`${containerWidth/100}rem`,
+                                        height:`${containerHeight/100}rem`,
+                                        backgroundColor:backgroundColor,
+                                        marginRight:`${((prizeList.length > prizeInCenterNum) &&(prizeList.length - 1) !== i) ? `${marginRight/100}rem` : ''}`
+                                    }} 
+                                >
+                                    <View 
+                                        className={styles['pirze__item-img']}
+                                        style={{
+                                            width:`${imgWidth/100}rem`,
+                                            height:`${imgHeight/100}rem`
+                                        }}
+                                    >
+                                        <Image 
+                                            src={itm.image} 
+                                            className={styles['pirze__item-img-icon']} 
+                                            style={{
+                                                width:`${imgWidth/100}rem`,
+                                                height:`${imgHeight/100}rem`
+                                            }}
+                                        />
                                     </View>
-                                    <View className={styles['pirze__item-name']}>{itm.name}</View>
+                                    {
+                                        isShowPrizeName &&
+                                        <View 
+                                            className={styles['pirze__item-name']}
+                                            style={{
+                                                height:`${60/100}rem`,
+                                                // lineHeight:`${60/100}rem`,
+                                                fontSize:`${24/100}rem`
+                                            }}
+                                        >{itm.name}</View>
+                                    }
                                 </View>
                             )
                         })

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

+##### ScrollXView滑动配置项
+
++ 入参
+
+|    配置项    |   类型   |    描述     |  默认值  |  备注  |
+| :--------   | :-----:  | :--------: | :-----:  | :---:|
+| prizeList    |   Array   |    滑动数据   |  [...]  | / |
+| containerWidth    |   Number   |    单个奖品容器的宽度   | 300 | / |
+| containerHeight    |   Number   |    单个奖品容器的高度   |  300  | / |
+| imgWidth    |   Number   |    奖品图片宽度   |  200  | / |
+| imgHeight    |   Number   |    奖品图片高度   |  200  | / |
+| isShowPrizeName    |   Boolean   |    是否展示奖品名称   |  true  | true:展示  false:不展示 |
+| prizeInCenterNum    |   Number   |    奖品少于n个时居中展示   |  n=2  | 多于n个,可滑动查看 |
+| marginRight    |   Number   |    奖品容器之间间距   |  26  | px |
+| backgroundColor    |   Number   |    奖品容器背景颜色   |  #E7E7EF  | / |
+
++ prizeList数组格式
+```json
+    [
+        {
+            "image":"",
+            "name":"xxx",
+            // ...
+        },
+        // ...
+    ]
+```
+
++ 使用
+```jsx
+    import ScrollXView from '@/components/_tb_comps/ScrollXView/ScrollXView'
+    // 组件不一定在该目录下,举例说明一下
+
+    const SCROLLXVIEW_CONFIG = {
+        prizeList: [], 
+        containerWidth : 300, 
+        containerHeight : 300,
+        imgWidth:200,
+        imgHeight:200,
+        isShowPrizeName:true,
+        prizeInCenterNum:2,
+        marginRight:26,
+        backgroundColor:'#E7E7EF'
+    }
+
+    export const Index = () => {
+        return(
+            <View className="scroll">
+                <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} />
+            </View>
+        )
+    }
+
+```
\ No newline at end of file

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

@@ -10,37 +10,58 @@
     align-items: center;
 }
 .show-pize-box__two {
+    width: 100%;
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
 }
 .show-pirze__item {
-    background: #E7E7EF;
+    // background: #E7E7EF;
     border-radius: 25px;
-    margin-left: 26px;
-}
-.show-pirze__item:last-child {
-    margin-right: 26px;
+    // margin-left: 26px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
 }
-.show-pirze__item:first-child {
-    margin-left: 10px;
+// .show-pirze__item:last-child {
+//     margin-right: 26px;
+// }
+// .show-pirze__item:first-child {
+//     margin-left: 10px;
+// }
+
+.show-pize-box__more{
+    // padding: 10px;
 }
+
+
 .pirze__item-img {
-    width: 224px;
-    height: 224px;
+    // width: 224px;
+    // height: 224px;
     background: #FFFFFF;
     border-radius: 25px;
     margin: 16px auto 20px;
 }
 .pirze__item-img-icon {
-    width: 224px;
-    height: 224px;
+    // width: 224px;
+    // height: 224px;
     border-radius: 25px;
+    .image-property(cover, center center);
 }
 .pirze__item-name {
-    font-size: 25px;
+    width: 90%;
     font-family: FZLTHProGlobal;
     font-weight: 400;
     color: #1C1C1C;
     text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // 单行
+    // white-space: nowrap;
+    // 多行
+    // display: -webkit-box;
+    // -webkit-box-orient:vertical;
+    // -webkit-line-clamp: 2;
+
 }
\ No newline at end of file

c_client/src/pages/index/index.jsx

@@ -49,6 +49,19 @@ const rotateConfig = {
   isShowPrizeName:true
 }
 
+const SCROLLXVIEW_CONFIG = {
+  prizeList: [], 
+  containerWidth : 300, 
+  containerHeight : 300,
+  imgWidth:200,
+  imgHeight:200,
+  isShowPrizeName:true,
+  prizeInCenterNum:2,
+  marginRight:26,
+  backgroundColor:'#E7E7EF'
+}
+
+
 
 
 function Index() {
@@ -186,10 +199,12 @@ function Index() {
 
       <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
 
-      {/* <ScrollXView prizeList={prizeList} /> */}
+      {/* 奖品查看左右滑动 */}
+      {/* <ScrollXView {...SCROLLXVIEW_CONFIG} prizeList={prizeList} /> */}
 
       {/* swiper左右滑动 */}
-      <SwiperView  swiperList={prizeList} vertical={false} />
+      {/* <SwiperView  swiperList={prizeList} /> */}
+
 
       {/* 大转盘 */}
       {/* <View className={styles['rotate']}