Commit 166ad3f2 authored by wanghuan's avatar wanghuan

add:按钮

parent 9621d902
......@@ -33,10 +33,16 @@ const SwiperView = (props) => {
} = props;
const [currentIndex, setCurrentIndex] = useState(0);
const [currentIndex, setCurrentIndex] = useState(1);
const indexref = useRef(0)
// const index = useMemo(()=>{
// return currentIndex;
// },currentIndex)
/**
* @description onchange事件
* @param {*} e
......@@ -78,8 +84,7 @@ const SwiperView = (props) => {
* @description
*/
const turnRound = ((e,type) => {
e.stopPropagation();
const turnRound = ((type) => {
const motion = {
[motionType.LEFT]:()=>{
setTimeout(() => {
......@@ -113,81 +118,84 @@ const SwiperView = (props) => {
},[currentIndex])
return (
<View
className="scroll_container"
style={{
width:`${650/100}rem`,
overflow:'hidden'
}}
>
<Swiper
className="swiper_group"
current={currentIndex}
easingFunction={easingFunction}
onChange={swiperChange}
circular={circular}
vertical={vertical}
autoplay={autoplay}
duration={duration}
interval={interval}
disableTouch={disableTouch}
<View className="contain">
<View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View>
<View
className="scroll_container"
style={{
width:`${swiperGroup.width/100}rem`,
height:`${swiperGroup.height/100}rem`,
overflow:`${swiperGroup.overflow}`
width:`${700/100}rem`,
overflow:'hidden'
}}
>
{swiperList.length &&
swiperList.map((item, i) => (
<SwiperItem>
<View
className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`,
backgroundColor:`${ swiperContent.backgroundColor}`,
backgroundImage:`${ swiperContent.backgroundImage}`,
borderRadius:`${swiperContent.borderRadius/100}rem`
}}
onTap={()=>getCurrentDetail(item)}
>
{i === currentIndex && showLeftRightBtn && (
<>
<View className='left_btn' onTap={(e)=>turnRound(e,'LEFT')}>&lt;&lt;</View>
<View className='right_btn' onTap={(e)=>turnRound(e,'RIGHT')}>&gt;&gt;</View>
</>
)}
<View
className="item_img_content"
<Swiper
className="swiper_group"
current={currentIndex}
easingFunction={easingFunction}
onChange={swiperChange}
circular={circular}
vertical={vertical}
autoplay={autoplay}
duration={duration}
interval={interval}
disableTouch={disableTouch}
style={{
width:`${swiperGroup.width/100}rem`,
height:`${swiperGroup.height/100}rem`,
overflow:`${swiperGroup.overflow}`
}}
>
{swiperList.length &&
swiperList.map((item, i) => (
<SwiperItem>
<View
className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
style={{
width:`${swiperContent.width/100}rem`,
height:`${swiperContent.height/100}rem`,
backgroundColor:`${ swiperContent.backgroundColor}`,
backgroundImage:`${ swiperContent.backgroundImage}`,
borderRadius:`${swiperContent.borderRadius/100}rem`
}}
onTap={()=>getCurrentDetail(item)}
>
{/* 单个swiper主要内容 */}
<Image
className="img"
style={{
width:`${imgContent.width/100}rem`,
height:`${imgContent.height/100}rem`
}}
src={item.image}></Image>
{
item?.content &&
<View
className='text_content'
{/* {i === currentIndex && (
<Image
className="checkPic"
src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
></Image>
)} */}
<View
className="item_img_content"
>
{/* 单个swiper主要内容 */}
<Image
className="img"
style={{
width:`${textContent.width/100}rem`,
height:`${textContent.height/100}rem`,
}}
>
<View className='text' >{item.content}</View>
</View>
}
width:`${imgContent.width/100}rem`,
height:`${imgContent.height/100}rem`
}}
src={item.image}></Image>
{
item?.content &&
<View
className='text_content'
style={{
width:`${textContent.width/100}rem`,
height:`${textContent.height/100}rem`,
}}
>
<View className='text' >{item.content}</View>
</View>
}
</View>
</View>
</View>
</SwiperItem>
))}
</Swiper>
</SwiperItem>
))}
</Swiper>
</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</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{
// width: 450px;
// overflow: hidden;
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-around;
......@@ -32,27 +71,7 @@
position: relative;
border-radius: 20px;
.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'
// import Demo from '@/components/_tb_comps/Rank/demo/index'
import JackpotModal from '@/components/_tb_modal/JackpotModal'
import { VerticalBarrage } from '@/components/_tb_comps/Barrage'
......@@ -90,11 +92,11 @@ export default function PreComp(props) {
return(
<ContainerFit hasFitPsd={true}>
<View className={styles['scroll-view']}>
<ScrollXView prizeList={prizeList} />
{/* <ScrollXView prizeList={prizeList} /> */}
</View>
<View className={styles['comp-view']}>
{/* 大转盘 */}
<RotateWheel />
{/* <RotateWheel /> */}
</View>
<View className={styles['comp-view']}>
{/* swiper左右滑动 */}
......@@ -102,7 +104,7 @@ export default function PreComp(props) {
</View>
{/* 排行榜 进度条 */}
<Demo />
{/* <Demo /> */}
{/* 倒计时 */}
<View
......@@ -111,12 +113,12 @@ export default function PreComp(props) {
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>
{/* 竖向弹幕 */}
<VerticalBarrage dataList={BARRAGE_LIST} />
{/* <VerticalBarrage dataList={BARRAGE_LIST} /> */}
</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