antd-Mobile走马灯Carousel遇到的坑

Posted 2023-04-25

参考技术A 问题：当Carousel数据通过接口获取时，自动切换效果就会无效，且首页展示的高度为默认的最小高度；只有手动切换一张之后，才能启动自动切换，且高度恢复为正常高度；

原因：

解决方法一：设置flag值，等数据加载完之后，重新render，此时再加载Carousel组件，就能正常启动了。这种方法的问题是，页面在重新加载时，会有2s左右的延时，性能很不好。

解决方法二： 加入componentDidUpdate函数

依然通过flag去控制是否自动切换，当接口请求结束flag设置为true，render结束后立即执行componentDidUpdate函数，此时数据已经加载完成，这时通过flag设置成自动切换，之所以取反，是因为flag一直为true就会死循环了。亲测如果没有componentDidUpdate函数，只通过componentDidMount函数以及display=flag来控制，也是行不通的。

通过百度多种尝试后最后一个可行，但有些原理还不是特别清楚，欢迎指正。

carousel 是 layui 模块，主要适用于跑马灯/轮播等交互场景

　carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

常见的options和方法整理如下：

  <div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
        <div carousel-item>
            <div style="background-color:red">条目1</div>
            <div style="background-color:green">条目2</div>
            <div style="background-color:blue">条目3</div>
            <div style="background-color:mediumorchid">条目4</div>
            <div style="background-color:orange">条目5</div>
        </div>
    </div>
    <!-- 条目中可以是任意内容，如：<img src=""> -->
    <script>
        layui.use('carousel', function () 
            var carousel = layui.carousel;
            //***************************建造实例
            var ins=carousel.render(
                elem: '#test1'
                , width: '500px'     //设置容器宽度
                , arrow: 'always'    //始终显示箭头，可选hover,none
                //,anim: 'updown'    //切换动画方式，可选fade,default
                , full: false        //全屏
                , autoplay: true     //自动切换
                , interval: 1000     //自动切换的时间间隔
                , index: 3           //初始化时item索引,默认时0
                , indicator:'inside' //指示器位置，可选outside,none
            );

            //**************************监听轮播切换事件
            carousel.on('change(carofilter)', function (obj)  //test1来源于对应HTML容器的 lay-filter="test1" 属性值
                console.log(obj.index);     //当前条目的索引
                console.log(obj.prevIndex); //上一个条目的索引
                console.log(obj.item);      //当前条目的元素对象
            );

            //****************************重置轮播
            //var ins = carousel.render(options);
            ins.reload(arrow:'hover');//将arror从alway变成hover
        );
    </script>

注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc

作者：捞月亮的猴子

　　　　

出处：捞月亮的猴子 - 博客园

　　　　

欢迎转载，但请标明出处。如果本文对您有些许帮助，点击一下推荐吧，Thanks♪(･ω･)ﾉ