美文网首页
h5页面中有定时器的时候,轮播图不滚动

h5页面中有定时器的时候,轮播图不滚动

作者: 知命者夏洛特 | 来源:发表于2019-06-20 10:37 被阅读0次

    (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'
     },
    }
    

    相关文章

      网友评论

          本文标题:h5页面中有定时器的时候,轮播图不滚动

          本文链接:https://www.haomeiwen.com/subject/cpjfqctx.html