(1)轮播图 react-slick 的使用,但是页面中有其他定时器的时候,轮播图不滚动
npm install react-slick
import Carousel from "react-slick";
const settings = {
speed: 200,
autoplay: true,
dots: false,
infinite: true,
slidesToShow: 1, //一页展示几条数据
slidesToScroll: 1,
vertical: true,
verticalSwiping: true,
arrows: false }
<div style={{backgroundColor:'white',width:275,borderBottomLeftRadius:5,borderBottomRightRadius:5, height: 105, paddingTop: 2,overflow: 'hidden'}}>
{this.state.users &&<Carousel {...settings}>
{this.state.users.map((item,index) => {
return(
<div style={{width:275}} key={index}>
<div style={{display: 'flex',flexDirection:'row',width:275,paddingLeft:10,paddingRight:10,paddingTop:5,paddingBottom:5,alignItems:'center'}}>
<img style={{width:24,height:24}} src={item.headImg} />
<span style={{color:'#333333',fontSize:12,marginLeft:8}}>{item.phone}</span>
<span style={{color:'#333333',fontSize:12,marginLeft:8}}>{item.content}</span>
<span style={{color:'#EE4634',fontSize:12,marginLeft:8}}>{item.amountYuan}</span>
</div>
{index < this.state.users.length -1 && <div style={{width:275,height:1,backgroundColor:'#FFF9E7'}}/> }
</div>
)
})}
</Carousel>}
</div>
(2)想要轮播滚动,要用 antd-mobile
npm install antd-mobile
import { Carousel } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
const settings = {
speed: 100,
autoplay: true,
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
vertical: true,
verticalSwiping: true,
arrows:false,
}
<div style={{ marginLeft: '5%', height: 160, overflow: "hidden"}}>
{firstBannerList&&firstBannerList.length>0?
<Carousel {...settings}>
{firstBannerList.map((item,index) => {
return(
<div style={styles.scrollTextdiv} key={index}>
<img style={{ width: 26, height: 26, borderRadius: 13 }} src={item.thumb} />
<div style={{display:'flex', flexDirection: 'row', width: '99%', marginLeft: 5, alignItems: 'center', flex: 1 }}>
<p style={{ color: '#333333', fontSize: 11, lineHeight: 13 }}>{item.itemName}</p>
<p style={{ color: '#333333', fontSize: 11, marginLeft: 5, lineHeight: 13 }}>{item.targetPageUrl} </p>
<p style={{ color: '#FF0000', fontSize: 12, lineHeight: 13 }}>{item.targetPageTitle}</p>
</div>
</div>
)
})}
</Carousel>
:null
}
</div>
const styles = {
scrollTextdiv: {
display: 'flex',
height: 34,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
paddingTop:10
// overflow: 'hidden'
},
}
网友评论