溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vuejs如何實(shí)現(xiàn)文字滾動(dòng)

發(fā)布時(shí)間：2021-11-01 14:34:32 來源：億速云 閱讀：426 作者：iii 欄目：編程語言

這篇文章主要介紹“vuejs如何實(shí)現(xiàn)文字滾動(dòng)”，在日常操作中，相信很多人在vuejs如何實(shí)現(xiàn)文字滾動(dòng)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vuejs如何實(shí)現(xiàn)文字滾動(dòng)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

vuejs實(shí)現(xiàn)文字滾動(dòng)的方法：1、創(chuàng)建好前端代碼文件；2、通過js代碼來控制盒子的高度，并使其不斷的重復(fù)添加即可。

vuejs如何實(shí)現(xiàn)文字滾動(dòng)

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么實(shí)現(xiàn)文字滾動(dòng)?

VueJS和Javascript實(shí)現(xiàn)文字上下滾動(dòng)效果:

一提到文字上下滾動(dòng)，我們就會(huì)想到用不同的程序去實(shí)現(xiàn)，而且頁面中有文字滾動(dòng)會(huì)增加這個(gè)網(wǎng)頁的互動(dòng)和可信度。

1.Js最簡單的方法是控制盒子的高度，使不斷的重復(fù)添加
vuejs如何實(shí)現(xiàn)文字滾動(dòng)

<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美元贈(zèng)金</span> 正在兌換中</li>
                        <li>用戶132****7754   剛剛  砸中<span class="yellow">500元京東卡</span> 正在兌換中</li>
                        <li>用戶181****4518 1分鐘前 砸中<span class="yellow">U盤+高級(jí)筆+充電寶</span> 正在兌換中</li>
                        <li>用戶185****5483 1分鐘前 砸中<span class="yellow">品牌熱銷保溫杯</span> 正在兌換中</li>
                        <li>用戶158****7375 2分鐘前 砸中<span class="yellow">外匯交易書+高級(jí)傘+手機(jī)支架+海馬刀</span> 正在兌換中</li>
                        <li>用戶130****6766 3分鐘前 砸中<span class="yellow">1000美元贈(zèng)金</span> 已成功兌換</li>
                        <li>用戶170****2437 5分鐘前 砸中<span class="yellow">U盤+高級(jí)筆+充電寶</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美元贈(zèng)金</span> 已成功兌換</li>
                        <li>用戶177****2154 9分鐘前 砸中<span class="yellow">外匯交易書+高級(jí)傘+手機(jī)支架+海馬刀</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");//把內(nèi)容重復(fù)復(fù)制，達(dá)到滾動(dòng)不間斷的效果
            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實(shí)現(xiàn)文字上線滾動(dòng)
vuejs如何實(shí)現(xiàn)文字滾動(dòng)

前端代碼呈現(xiàn)：

<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>

數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)：

<script>
new Vue({
        el:'#app',
        data(){
            return{
                animate:false,
        scroll_lists:[
            {time:'2秒鐘前',company:'?？低暎?02415）'},  
            {time:'8秒鐘前',company:'烽火通信（600498）'}, 
            {time:'3分鐘前',company:'恒逸石化（000703）'},  
            {time:'5分鐘前',company:'紫光國微（002049）'},
            {time:'39分鐘前',company:'新天科技（300259）'},
            {time:'1小時(shí)前',company:'興業(yè)銀行（601166）'},
            {time:'3小時(shí)前',company:'中國核建（601611）'}
        ],
    };
    },
 //created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
//mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
    created(){
        setInterval(this.scroll,2000)
    },
    methods:{
        // 根據(jù)字典生成隨機(jī)序列
     randomCode:function (len,dict) {
 
    for (var i = 0,rs = ''; i < len; i++)
        rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length);
 
    return rs;
 
},
 
// 生成隨機(jī)手機(jī)號(hào)碼
randomPhoneNumber:function(){
     
   // 第1位是1 第2,3位是3458 第4-7位是* 最后四位隨機(jī) this.$options.methods使用上一個(gè)函數(shù)的返回值
 return [1,this.$options.methods.randomCode(2,'3458'),'****',this.$options.methods.randomCode(4,'0123456789')].join(''); }, 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>

到此，關(guān)于“vuejs如何實(shí)現(xiàn)文字滾動(dòng)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手