Home > Article > Web Front-end > How to implement text scrolling in vuejs

How to implement text scrolling in vuejs

藏色散人Original: 2021-11-01 14:11:102790browse

Vuejs method to implement text scrolling: 1. Create the front-end code file; 2. Control the height of the box through js code and make it continuously added.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs realize text scrolling?

VueJS and Javascript realize the effect of text scrolling up and down:

When it comes to text up and down For scrolling, we will think of using different programs to achieve it, and having text scrolling on the page will increase the interaction and credibility of the web page.

1.The simplest way in Js is to control the height of the box so that it can be added repeatedly

<html>
<body>
<head>
/**scroll css**/
#scrolldiv{height: 400px;overflow: hidden;}
</head>
<div id="scrolldiv"  class="scroll">
                    <ul id="scroll1">
                        <li>用户130****0834   刚刚  砸中<span class="yellow">500元京东卡</span> 正在兑换中</li>
                        <li>用户176****2746   刚刚  砸中<span class="yellow">1000美元赠金</span> 正在兑换中</li>
                        <li>用户132****7754   刚刚  砸中<span class="yellow">500元京东卡</span> 正在兑换中</li>
                        <li>用户181****4518 1分钟前 砸中<span class="yellow">U盘+高级笔+充电宝</span> 正在兑换中</li>
                        <li>用户185****5483 1分钟前 砸中<span class="yellow">品牌热销保温杯</span> 正在兑换中</li>
                        <li>用户158****7375 2分钟前 砸中<span class="yellow">外汇交易书+高级伞+手机支架+海马刀</span> 正在兑换中</li>
                        <li>用户130****6766 3分钟前 砸中<span class="yellow">1000美元赠金</span> 已成功兑换</li>
                        <li>用户170****2437 5分钟前 砸中<span class="yellow">U盘+高级笔+充电宝</span> 已成功兑换</li>
                        <li>用户156****2475 5分钟前 砸中<span class="yellow">品牌热销保温杯</span> 已成功兑换</li>
                        <li>用户189****1698 7分钟前 砸中<span class="yellow">500元京东卡</span> 已成功兑换</li>
                        <li>用户132****1754 8分钟前 砸中<span class="yellow">1000美元赠金</span> 已成功兑换</li>
                        <li>用户177****2154 9分钟前 砸中<span class="yellow">外汇交易书+高级伞+手机支架+海马刀</span> 已成功兑换</li>
                    </ul>
                    <ul id="scroll2"></ul>
                </div>
<script>
    /**word scroll css**/
        window.onload = roll(40);

        function roll(t) {
            var scroll1 = document.getElementById("scroll1");
            var scroll2= document.getElementById("scroll2");
            var scrolldiv = document.getElementById("scrolldiv");//把内容重复复制，达到滚动不间断的效果
            scroll2.innerHTML = scroll1.innerHTML;
            scrolldiv.scrollTop = 0;
         setInterval(rollStart, t);
        }

        function rollStart() {
            if (scrolldiv.scrollTop >= scroll1.scrollHeight) {
                scrolldiv.scrollTop = 0;
            } else {
                scrolldiv.scrollTop++;
            }
        }
</script>
</body>
</html>

2.Vuejs implements text online scrolling

Front-end code presentation:

<div class="scroll">
                    <ul id="scrollDiv"  ref="rollul" :class="{anim:animate==true}">
                        <li v-for="item in scroll_lists"><span>{{item.time}}</span><span class="s-2">{{randomPhoneNumber()}}用户诊断了</span><span>{{item.company}}</span></li>
                    </ul>
                </div>

Data structure design:

<script>
new Vue({
        el:&#39;#app&#39;,
        data(){
            return{
                animate:false,
        scroll_lists:[
            {time:&#39;2秒钟前&#39;,company:&#39;海康威视（002415）&#39;},  
            {time:&#39;8秒钟前&#39;,company:&#39;烽火通信（600498）&#39;}, 
            {time:&#39;3分钟前&#39;,company:&#39;恒逸石化（000703）&#39;},  
            {time:&#39;5分钟前&#39;,company:&#39;紫光国微（002049）&#39;},
            {time:&#39;39分钟前&#39;,company:&#39;新天科技（300259）&#39;},
            {time:&#39;1小时前&#39;,company:&#39;兴业银行（601166）&#39;},
            {time:&#39;3小时前&#39;,company:&#39;中国核建（601611）&#39;}
        ],
    };
    },
 //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
//mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
    created(){
        setInterval(this.scroll,2000)
    },
    methods:{
        // 根据字典生成随机序列
     randomCode:function (len,dict) {
 
    for (var i = 0,rs = &#39;&#39;; i < len; i++)
        rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length);
 
    return rs;
 
},
 
// 生成随机手机号码
randomPhoneNumber:function(){
     
   // 第1位是1 第2,3位是3458 第4-7位是* 最后四位随机 this.$options.methods使用上一个函数的返回值
 return [1,this.$options.methods.randomCode(2,&#39;3458&#39;),&#39;****&#39;,this.$options.methods.randomCode(4,&#39;0123456789&#39;)].join(&#39;&#39;); }, scroll(){ this.animate = true         var that = this;       setTimeout(function(){              that.scroll_lists.push(that.scroll_lists[0]);             that.scroll_lists.shift();             that.animate=false; },1500) } } }) </script>

Recommendation: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to implement text scrolling in vuejs. For more information, please follow other related articles on the PHP Chinese website!

JavaScript vue.js 数据结构 JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to call json in vuejsNext article：How to call json in vuejs

See more

How to implement text scrolling in vuejs

Related articles