美文网首页
MUI纵向跑马灯——上下滚动

MUI纵向跑马灯——上下滚动

作者: Yor_h | 来源:发表于2019-05-30 22:19 被阅读0次

    最近用MUI做APP的混合开发的时候,遇到了两种跑马灯的功能需求,一种横向左右播放,再MUI的事例中有,但是上下播放再官方文档中没找到,就查了下资料,发现用JS可以完成该功能。

    在页面中引入jquery.carouFredSel-6.1.0-packed.js(版本随意)

    HTML部分

    <!-- 消息轮播 -->

    <div id="carousel">

    <div id="msg"><a>19-05-10&nbsp;10:21&nbsp;用户123****1223充值「100」</a></div>

    <div id="msg"><a>19-05-10&nbsp;10:21&nbsp;用户155****4321充值「200」</a></div>

    <div id="msg"><a>19-05-10&nbsp;10:21&nbsp;用户181****3423充值「300」</a></div>

    </div>

    JS部分

    $(function() {

        $('#carousel').carouFredSel(

            responsive: true,

            direction: 'down',

            height: '26%',

            items: {

                height: 100,

                width: '750%',

                visible: {

                    min: 1,

                    max: 1

                }

            },

            scroll: {

                items: '-1'

            }

    });

    });

    关于滚动方向,可以修改参数”direction“,默认值是”left“ 向左,可修改为”right“,”up“,”down“,分别对应右,上,下。

    相关文章

      网友评论

          本文标题:MUI纵向跑马灯——上下滚动

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