Commit 166ad3f2 authored by wanghuan's avatar wanghuan

add:按钮

parent 9621d902
...@@ -33,10 +33,16 @@ const SwiperView = (props) => { ...@@ -33,10 +33,16 @@ const SwiperView = (props) => {
} = props; } = props;
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(1);
const indexref = useRef(0) const indexref = useRef(0)
// const index = useMemo(()=>{
// return currentIndex;
// },currentIndex)
/** /**
* @description onchange事件 * @description onchange事件
* @param {*} e * @param {*} e
...@@ -78,8 +84,7 @@ const SwiperView = (props) => { ...@@ -78,8 +84,7 @@ const SwiperView = (props) => {
* @description * @description
*/ */
const turnRound = ((e,type) => { const turnRound = ((type) => {
e.stopPropagation();
const motion = { const motion = {
[motionType.LEFT]:()=>{ [motionType.LEFT]:()=>{
setTimeout(() => { setTimeout(() => {
...@@ -113,14 +118,16 @@ const SwiperView = (props) => { ...@@ -113,14 +118,16 @@ const SwiperView = (props) => {
},[currentIndex]) },[currentIndex])
return ( return (
<View className="contain">
<View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View>
<View <View
className="scroll_container" className="scroll_container"
style={{ style={{
width:`${650/100}rem`, width:`${700/100}rem`,
overflow:'hidden' overflow:'hidden'
}} }}
> >
<Swiper <Swiper
className="swiper_group" className="swiper_group"
current={currentIndex} current={currentIndex}
...@@ -152,13 +159,12 @@ const SwiperView = (props) => { ...@@ -152,13 +159,12 @@ const SwiperView = (props) => {
}} }}
onTap={()=>getCurrentDetail(item)} onTap={()=>getCurrentDetail(item)}
> >
{i === currentIndex && showLeftRightBtn && ( {/* {i === currentIndex && (
<> <Image
<View className='left_btn' onTap={(e)=>turnRound(e,'LEFT')}>&lt;&lt;</View> className="checkPic"
<View className='right_btn' onTap={(e)=>turnRound(e,'RIGHT')}>&gt;&gt;</View> src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
</> ></Image>
)} */}
)}
<View <View
className="item_img_content" className="item_img_content"
> >
...@@ -188,6 +194,8 @@ const SwiperView = (props) => { ...@@ -188,6 +194,8 @@ const SwiperView = (props) => {
))} ))}
</Swiper> </Swiper>
</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View>
</View> </View>
); );
}; };
......
.contain{
width: 100%;
position: relative;
}
.left_btn{
width: 80px;
height: 40px;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 1px solid cyan;
box-sizing: border-box;
}
.right_btn{
width: 80px;
height: 40px;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 1px solid cyan;
box-sizing: border-box;
}
.left_btn{
left: 10px;
}
.right_btn{
right: 10px;
}
.scroll_container{ .scroll_container{
// width: 450px; // width: 450px;
// overflow: hidden; // overflow: hidden;
width: 80%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
...@@ -32,27 +71,7 @@ ...@@ -32,27 +71,7 @@
position: relative; position: relative;
border-radius: 20px; border-radius: 20px;
.image-property(cover, top center); .image-property(cover, top center);
.left_btn,
.right_btn{
width: 80px;
height: 40px;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
z-index: 1;
top: 50%;
transform: translateY(-50%);
border: 1px solid cyan;
box-sizing: border-box;
}
.left_btn{
left: 10px;
}
.right_btn{
right: 10px;
}
......
...@@ -30,6 +30,8 @@ import Countdown from '@/components/_tb_comps/CountDown/CountDown' ...@@ -30,6 +30,8 @@ import Countdown from '@/components/_tb_comps/CountDown/CountDown'
// import Demo from '@/components/_tb_comps/Rank/demo/index' // import Demo from '@/components/_tb_comps/Rank/demo/index'
import JackpotModal from '@/components/_tb_modal/JackpotModal'
import { VerticalBarrage } from '@/components/_tb_comps/Barrage' import { VerticalBarrage } from '@/components/_tb_comps/Barrage'
...@@ -90,11 +92,11 @@ export default function PreComp(props) { ...@@ -90,11 +92,11 @@ export default function PreComp(props) {
return( return(
<ContainerFit hasFitPsd={true}> <ContainerFit hasFitPsd={true}>
<View className={styles['scroll-view']}> <View className={styles['scroll-view']}>
<ScrollXView prizeList={prizeList} /> {/* <ScrollXView prizeList={prizeList} /> */}
</View> </View>
<View className={styles['comp-view']}> <View className={styles['comp-view']}>
{/* 大转盘 */} {/* 大转盘 */}
<RotateWheel /> {/* <RotateWheel /> */}
</View> </View>
<View className={styles['comp-view']}> <View className={styles['comp-view']}>
{/* swiper左右滑动 */} {/* swiper左右滑动 */}
...@@ -102,7 +104,7 @@ export default function PreComp(props) { ...@@ -102,7 +104,7 @@ export default function PreComp(props) {
</View> </View>
{/* 排行榜 进度条 */} {/* 排行榜 进度条 */}
<Demo /> {/* <Demo /> */}
{/* 倒计时 */} {/* 倒计时 */}
<View <View
...@@ -111,12 +113,12 @@ export default function PreComp(props) { ...@@ -111,12 +113,12 @@ export default function PreComp(props) {
marginTop:`${300/100}rem` marginTop:`${300/100}rem`
}} }}
> >
{/* <CountDown targetTime="2021-10-01 10:00:00" /> */} {/* <Countdown targetTime="2021-10-01 10:00:00" /> */}
<View className={styles['view']} onTap={playCurrentAudio}>play audio</View> <View className={styles['view']} onTap={playCurrentAudio}>play audio</View>
</View> </View>
{/* 竖向弹幕 */} {/* 竖向弹幕 */}
<VerticalBarrage dataList={BARRAGE_LIST} /> {/* <VerticalBarrage dataList={BARRAGE_LIST} /> */}
</ContainerFit> </ContainerFit>
) )
......
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