资讯专栏INFORMATION COLUMN

百度ecahrts和swiper一起使用,loop复制slide导致图表不展示的问题解决

xingqiba / 1471人阅读

摘要:由于老项目用的,所以这里贴出来的是的配置项,的参照下面的稍作修改即可原理就是通过回调自己手动控制

由于老项目用的swiper3,所以这里贴出来的是swiper3的配置项,swiper4的参照下面的稍作修改即可(原理就是通过回调自己手动控制)

autoplay: 0,
loop: false,
onInit: swiper => {
    setTimeout(() => {
        swiper.slideNext();
    }, 1500);
},
onSlideChangeEnd: swiper => {
    if (swiper.activeIndex === 1) {
        let dom = swiper.slides[0];
        swiper.removeSlide(0);
        swiper.appendSlide(dom);
        swiper.activeIndex = 0;
        swiper.update();
        setTimeout(() => {
            swiper.slideNext();
        }, 1500);
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106938.html

相关文章

  • 百度ecahrtsswiper一起使用loop复制slide导致图表展示问题解决

    摘要:由于老项目用的,所以这里贴出来的是的配置项,的参照下面的稍作修改即可原理就是通过回调自己手动控制 由于老项目用的swiper3,所以这里贴出来的是swiper3的配置项,swiper4的参照下面的稍作修改即可(原理就是通过回调自己手动控制) autoplay: 0, loop: false, onInit: swiper => { setTimeout(() => { ...

    qieangel2013 评论0 收藏0
  • 移动端 - 局部滚动

    摘要:对话内容超过一屏,使对话内容上移,当然是改变父元素的值啦用户可以上下滑动对话框,就类似于滚动条效果,设置父元素高度并且,子元素高度即可。遇到问题局部滚动效果,以上想法设置父元素高度并且在端可以正常滑动,但在移动端失效。 起因 我司最近在做一个H5,有一个模拟微信对话框的需求,具体需求如下。 对话内容固定,但需要一句一句显示 对话内容超过一屏后,需要使对话内容上移 对话内容结束后,用户...

    xiongzenghui 评论0 收藏0
  • 解决使用 swiper 常见问题

    摘要:图片延迟加载需要将图片标签的改写成,并且增加类名。取消拖动最后一页或者第一页时的留白状态抵抗率。边缘抵抗力的大小比例。可应用于分页器,按钮和滚动条。点击查看的文档 使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会...

    王伟廷 评论0 收藏0

发表评论

0条评论

xingqiba

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<