Skip to content

T
taobao-mini-template
Commit 0017c2e2 authored by wanghuan's avatar wanghuan
Browse files
Options

scrollx_view

parent 8908829a
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 23 deletions
c_client/src/components/_tb_comps/ScrollXView/ScrollXView.jsx
View file @ 0017c2e2
......@@ -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 0 → 100644
View file @ 0017c2e2
##### 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
View file @ 0017c2e2
......@@ -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
View file @ 0017c2e2
......@@ -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']}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment