美文网首页
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页面中有定时器的时候,轮播图不滚动

    (1)轮播图 react-slick 的使用,但是页面中有其他定时器的时候,轮播图不滚动npm install ...

  • 轮播图笔记

    轮播图课程学完目标: 1.dom操作 2.定时器 3.事件 4.js动画 4.函数递归 5.无限滚动大法(不会轮播...

  • 轮播图心得

    一、轮播图 1.传统轮播图: 运动的封装:(1)定时器的使用,创建定时器setInterval();每隔指定的时间...

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 异步与回调函数-call

    设置轮播图不自动滚动

  • 仿造天猫、京东、凡客等,轮播图的开发(jQuery)

    轮播图思路:1、轮播图布局2、定时器实现轮播效果3、指示器的鼠标移入(mouseenter)、移出(mousele...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • Slider - 轮播图

    简介: 用react开发的轮播图组件,支持淡入淡出、水平滚动、垂直滚动的无缝轮播效果。可自定义轮播内容。 API ...

  • vue中swiper的使用(轮播失效)

    在使用vue写swiper轮播图的时候,有时会发生轮播图不生效的问题,这是因为页面中JS执行的顺序问题,这时swi...

网友评论

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

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