Vue做文字滚动

最新推荐文章于 2024-06-06 00:30:00 发布

原创最新推荐文章于 2024-06-06 00:30:00 发布 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现文字滚动效果的案例。通过布局、样式设置和数据渲染，创建了一个显示最新公告的滚动列表。利用Vue的data属性存储公告数据，在视图层动态渲染，并通过定时器和数组操作实现平滑过渡的滚动效果。

在JQ22看到的一个小案例，模仿一下

首先在这里可以看出来，要渲染的只有滚动的部分，需求就是每过几秒跳到下一个

先写布局部分：

 <div id="app">
        <h1>文字滚动</h1>
        <div class="box">
            <div class="box-left">
                <span>最新公告</span>
            </div>
            <div class="box-right">
                <ul>
                    <li>
                    </li>
                </ul>
            </div>
        </div>
    </div>

样式部分：

 *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        h1{
            text-align: center;
        }
        #app{
            width: 1000px;
            margin: 0 auto;
        }
        .box{
            display: flex;
            background-color: antiquewhite;
        }
        .box-left{
            width: 100px;
            text-align: center;
        }
        .box-left span{
            line-height: 30px;
        }
        .box-right{
            height: 30px;
            overflow: hidden;
        }
        .box-right>ul>li{
            line-height: 30px;
        }
        .top{
            transition: all 0.5s;
            margin-top: -30px;
        }

        .red{
            color: red;
        }
    </style>

在vm实例的数据中心，声明一个list数组对象，存放数据：

data:{
           list:[
                  {name:"开心果",city:"北京",xiaoshou:"销售",amount:"320",danwei:"万"},
                  {name:"芒果干",city:"上海",xiaoshou:"销售",amount:"470",danwei:"万"},
                  {name:"草莓干",city:"广州",xiaoshou:"销售",amount:"970",danwei:"万"},
                  {name:"葡萄干",city:"重庆",xiaoshou:"销售",amount:"10",danwei:"万"}
                ]
            },

在视图层的 li 中渲染出来：

<li v-for="item in list">
                        <!-- 渲染水果名 -->
                        <span>{{item.name}}</span>
                        <span>-</span>
                        <!-- 城市名 -->
                        <span class="red">{{item.city}}</span>
                        <!-- 固定的销售字样 -->
                        <span>{{item.xiaoshou}}</span>
                        <!-- 销售金额 -->
                        <span class="red">{{item.amount}}</span>
                        <!-- 销售金额单位 -->
                        <span>{{item.danwei}}</span>
                    </li>

因为上面设定了盒子的宽度，并且给父级盒子设置了溢出隐藏，所以只会显示一条数据，

在城市和销售金额上给上 calss 名，让字体颜色变红。

在 ul 上添加过渡效果：

 .top{
            transition: all 0.5s;
            margin-top: -30px;
        }

但是如果直接使用就会让第一条元素被顶替掉，所以：

 <ul :class="{top:istop}">

 istop:false

在方法中心定义方法：

当延时器运行时，每一次会把数组的第一位加入到数组的最后一位，然后在删除第一位，这样显示出来的就是下一个，第二次运行时会继续把当前的第一个元素(也就是原来的第二个)加入数组的最后一位并删除当前这一位，让下一个元素变成第一位，以此类推

showBox(){
                    // 该方法开始运行时，让该类名可以使用
                    this.istop = true;
                    setTimeout(()=>{
                        this.list.push(this.list[0])
                        this.list.shift()
                        // 运行到内部延时器时，让该类名不能使用
                        this.istop = false
                    },5000)
                }

在生命周期钩子函数的实例创建后，中使用定时器来循环使用方法

 created(){
                // 生命周期钩子函数，当vm实例创建后，运行该代码
                // 在定时器里使用我们在方法中心的方法
                setInterval(this.showBox,2000)
            }

这时候就做好啦，不加过渡的话，就很生硬