亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue實現(xiàn)列表跑馬燈效果

 更新時間:2022年04月11日 16:05:53   作者:luanluan8888  
這篇文章主要為大家詳細介紹了Vue實現(xiàn)列表跑馬燈效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)列表跑馬燈效果的具體代碼,供大家參考,具體內(nèi)容如下

Vue文件中:

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
? ? <li v-for ="item in gzdtList" >
?? ??? ?<a :href="item.url" rel="external nofollow"  target="_blank" :title="item.title" >
?? ??? ??? ?<span class="GZDTtitle">
?? ??? ??? ??? ?{{item.title | ellipsis}}
?? ??? ??? ?</span>
?? ??? ?</a>
?? ??? ?<span class="right date">{{item.date}}</span>
? ? </li>
</ul>

js:

<script>
?? ?export default{
?? ?data:function(){
?? ??? ?return {
?? ??? ??? ?timeId:null,
?? ??? ??? ?// 跑馬燈
?? ??? ??? ?animate:false,
?? ??? ?};
?? ?},
?? ?filters: {},
?? ?methods:{
?? ??? ?// 跑馬燈
?? ??? ?scroll(){
?? ??? ??? ?this.animate =true;// 因為在消息向上滾動的時候需要添加css3過渡動畫,所以這里需要設(shè)置true
?? ??? ??? ?setTimeout(()=>{ ? ?// ?這里直接使用了es6的箭頭函數(shù),省去了處理this指向偏移問題,代碼也比之前簡化了很多
?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 將數(shù)組的第一個元素添加到數(shù)組的
?? ??? ? ? ? ? ?this.TZGGList.shift(); //刪除數(shù)組的第一個元素
?? ??? ? ? ? ? ?this.animate = false // margin-top 為0 的時候取消過渡動畫,實現(xiàn)無縫滾動
?? ??? ? ? ? ?}, 1000)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)懸停,停止?jié)L動
?? ??? ?stopScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?clearInterval(this.timeId)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)移開 ,接著滾動
?? ??? ?startScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 設(shè)置滑動速度
?? ??? ?},
?? ?},
?? ?mounted: function() {
?? ??? ?this.init();
?? ??? ?this.timeId=setInterval(this.scroll,1500);
?? ?},
}
</script>

css:

/*跑馬燈*/
<style>
?? ?#box{
?? ??? ?height: 238px;
?? ??? ?overflow: hidden;
?? ??? ?border: 1px solid #ffffff;
?? ??? ?margin-top: 0px;
?? ?}?
?? ?.anim{
?? ??? ?transition: all 2s;
?? ?}
?? ?
?? ?#con1 li{
?? ??? ?list-style: none;
?? ??? ?line-height: 35px;
?? ??? ?height: 35px;
?? ?}
</style>

運行過程中發(fā)現(xiàn)走馬燈title可以滾動改變但是對應(yīng)的span標(biāo)簽的內(nèi)容不變,可能是因為瀏覽器版本過高,可更換瀏覽器或降低瀏覽器版本試試

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中當(dāng)圖片地址無效的時候,顯示默認(rèn)圖片的方法

    vue中當(dāng)圖片地址無效的時候,顯示默認(rèn)圖片的方法

    今天小編就為大家分享一篇vue中當(dāng)圖片地址無效的時候,顯示默認(rèn)圖片的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 如何使用HBuilderX把vue項目打包成apk

    如何使用HBuilderX把vue項目打包成apk

    這篇文章主要介紹了如何使用HBuilderX把vue項目打包成apk,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 一文帶你了解Vue數(shù)組的變異方法

    一文帶你了解Vue數(shù)組的變異方法

    Vue框架提供了一些便捷的數(shù)組變異方法,包括push、pop、shift、unshift、splice、sort和reverse等,Vue的數(shù)組變異方法可以自動觸發(fā)DOM更新,本文就詳細帶大家了解一下Vue.js數(shù)組的變異方法
    2023-06-06
  • vue列表如何自動滾動到制定位置

    vue列表如何自動滾動到制定位置

    這篇文章主要介紹了vue列表如何自動滾動到制定位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南

    vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南

    jsMind是一個顯示/編輯思維導(dǎo)圖的純javascript類庫,其基于 html5的canvas進行設(shè)計,這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue elementui tree 任意級別拖拽功能代碼

    vue elementui tree 任意級別拖拽功能代碼

    這篇文章主要介紹了vue elementui tree 任意級別拖拽功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue單頁面如何設(shè)置高度100%全屏

    vue單頁面如何設(shè)置高度100%全屏

    這篇文章主要介紹了vue單頁面如何設(shè)置高度100%全屏,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue-for循環(huán)嵌套操作示例

    vue-for循環(huán)嵌套操作示例

    這篇文章主要介紹了vue-for循環(huán)嵌套操作,結(jié)合實例形式分析了vue.js使用for循環(huán)嵌套讀取數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法

    Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法

    這篇文章主要給大家介紹了關(guān)于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下
    2023-08-08
  • antd Form組件方法getFieldsValue獲取自定義組件的值操作

    antd Form組件方法getFieldsValue獲取自定義組件的值操作

    這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10

最新評論