Skip to content

T
taobao-mini-template
Commit 9343cf13 authored by wanghuan's avatar wanghuan
Browse files
Options

add:scrollxview

parent a3a88714
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 63 deletions
c_client/src/components/_tb_comps/ScrollXView/ScrollXView.jsx
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
.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
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
......@@ -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
View file @ 9343cf13
......@@ -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>
......
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