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

(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'
 },
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容