vue實(shí)現(xiàn)豎屏滾動公告效果
更新時間：2022年04月08日 10:19:47 作者：張艷偉_Laura
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)豎屏滾動公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)豎屏滾動公告效果的具體代碼，供大家參考，具體內(nèi)容如下
html文件
<template>
<div class="scroll-wrap">
? ? ? ? ? <div
? ? ? ? ? ? class="scroll-content"
? ? ? ? ? ? :style="{ top }"
? ? ? ? ? ? @mouseenter="Stop()"
? ? ? ? ? ? @mouseleave="Up()"
? ? ? ? ? >
? ? ? ? ? ? <p v-for="item in reportList">
? ? ? ? ? ? ? 恭喜{{ item.className }}{{ item.userName }}晉級為{{ item.level }}
? ? ? ? ? ? </p>
? ? ? ? ? </div>
? ? ?</div>
</template>javascript文件
created(){
? ? this.getReportList();
? ? this.ScrollUp();
},
computed: {
? ? top() {
? ? ? return -this.activeIndex * 30 + "px";
? ? },
? },
?methods: { ??
? ?? ?//查詢晉級名單
? ? getReportList() {
? ? ? var vm = this;
? ? ? vm.$axios
? ? ? ? .get("/personResult/selectImprovementList")
? ? ? ? .then(function (response) {
? ? ? ? ? if (response.data.code === "0000") {
? ? ? ? ? ? vm.reportList = response.data.data;
? ? ? ? ? ?} else if (response.data.code === "1111") {
? ? ? ? ? ? vm.$message({
? ? ? ? ? ? ? message: response.data.message,
? ? ? ? ? ? ? type: "warning",
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? });
? ? },
? ? //滾動播報(bào)方法
? ? ScrollUp() {
? ? ? this.intnum = setInterval((_) => {
? ? ? ? if (this.activeIndex < this.reportList.length) {
? ? ? ? ? this.activeIndex += 1;
? ? ? ? } else {
? ? ? ? ? this.activeIndex = 0;
? ? ? ? }
? ? ? }, 1000);
? ? },
? ? Stop() {
? ? ? clearInterval(this.intnum);
? ? },
? ? Up() {
? ? ? this.ScrollUp();
? ? },
}css文件
.scroll-wrap {
? position: relative;
? z-index: 2;
? float: left;
? margin-left: 5%;
? overflow: hidden;
}
.scroll-content {
? position: relative;
? transition: top 0.5s;
}
.scroll-content p {
? /* 每行信息間隔高度 */
? line-height: 30px;
? font-size: 20px;
? color: yellow;
? text-align: center;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Echarts+VUE柱狀圖繪制細(xì)節(jié)并且屏幕自適應(yīng)完整代碼
柱狀圖(或稱條形圖)是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型,這篇文章主要給大家介紹了關(guān)于Echarts+VUE柱狀圖繪制細(xì)節(jié)并且屏幕自適應(yīng)的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div拖拽互換位置的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
有時在頁面刷新或者返回等操作時,想監(jiān)聽路由變化進(jìn)行數(shù)據(jù)更新等操作,下面這篇文章主要給大家介紹了關(guān)于vue路由監(jiān)聽的一些常用方式,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了使用vue構(gòu)建一個上傳圖片表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue2之jessibuca視頻插件使用教程詳細(xì)講解
Jessibuca進(jìn)行直播流播放,為用戶帶來便捷、高效的視頻觀看體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue2之jessibuca視頻插件使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue響應(yīng)式系統(tǒng)之嵌套，我們在開發(fā)中肯定存在組件嵌套組件的情況，下文將舉例說明情況，需要的小伙伴可以參考一下2022-04-04