Skip to content

T
taobao-mini-template
Commit 166ad3f2 authored by wanghuan's avatar wanghuan
Browse files
Options

add：按钮

parent 9621d902
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 98 deletions
c_client/src/components/_tb_comps/SwiperView/SwiperView.jsx
View file @ 166ad3f2
...@@ -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,81 +118,84 @@ const SwiperView = (props) => { ...@@ -113,81 +118,84 @@ const SwiperView = (props) => {
},[currentIndex]) },[currentIndex])
return ( return (
<View <View className="contain">
className="scroll_container" <View className='left_btn' onTap={()=>turnRound('LEFT')}>&lt;&lt;</View>
style={{
width:`${650/100}rem`, <View
overflow:'hidden' className="scroll_container"
}}
>
<Swiper
className="swiper_group"
current={currentIndex}
easingFunction={easingFunction}
onChange={swiperChange}
circular={circular}
vertical={vertical}
autoplay={autoplay}
duration={duration}
interval={interval}
disableTouch={disableTouch}
style={{ style={{
width:`${swiperGroup.width/100}rem`, width:`${700/100}rem`,
height:`${swiperGroup.height/100}rem`, overflow:'hidden'
overflow:`${swiperGroup.overflow}`
}} }}
> >
{swiperList.length && <Swiper
swiperList.map((item, i) => ( className="swiper_group"
<SwiperItem> current={currentIndex}
<View easingFunction={easingFunction}
className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`} onChange={swiperChange}
style={{ circular={circular}
width:`${swiperContent.width/100}rem`, vertical={vertical}
height:`${swiperContent.height/100}rem`, autoplay={autoplay}
backgroundColor:`${ swiperContent.backgroundColor}`, duration={duration}
backgroundImage:`${ swiperContent.backgroundImage}`, interval={interval}
borderRadius:`${swiperContent.borderRadius/100}rem` disableTouch={disableTouch}
}} style={{
onTap={()=>getCurrentDetail(item)} width:`${swiperGroup.width/100}rem`,
> height:`${swiperGroup.height/100}rem`,
{i === currentIndex && showLeftRightBtn && ( overflow:`${swiperGroup.overflow}`
<> }}
<View className='left_btn' onTap={(e)=>turnRound(e,'LEFT')}>&lt;&lt;</View> >
<View className='right_btn' onTap={(e)=>turnRound(e,'RIGHT')}>&gt;&gt;</View> {swiperList.length &&
</> swiperList.map((item, i) => (
<SwiperItem>
)} <View
<View className={`scroll_item ${i === currentIndex ? "current_item" : ""} ${useCustomAni(i)}`}
className="item_img_content" 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主要内容 */} {/* {i === currentIndex && (
<Image <Image
className="img" className="checkPic"
style={{ src="https://yun.dui88.com/tebuXinYuan/checkGoods.png"
width:`${imgContent.width/100}rem`, ></Image>
height:`${imgContent.height/100}rem` )} */}
}} <View
src={item.image}></Image> className="item_img_content"
{ >
item?.content && {/* 单个swiper主要内容 */}
<View <Image
className='text_content' className="img"
style={{ style={{
width:`${textContent.width/100}rem`, width:`${imgContent.width/100}rem`,
height:`${textContent.height/100}rem`, height:`${imgContent.height/100}rem`
}} }}
> src={item.image}></Image>
<View className='text' >{item.content}</View> {
</View> 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>
</View> </SwiperItem>
</SwiperItem> ))}
))} </Swiper>
</Swiper>
</View>
<View className='right_btn' onTap={()=>turnRound('RIGHT')}>&gt;&gt;</View>
</View> </View>
); );
}; };
......
c_client/src/components/_tb_comps/SwiperView/SwiperView.less
View file @ 166ad3f2
.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;
}
......
c_client/src/pages/preComp/preComp.jsx
View file @ 166ad3f2
...@@ -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