欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)消息向上無縫滾動效果

 更新時間：2022年04月11日 09:08:58   作者：conglvse  
這篇文章主要為大家詳細介紹了vue實現(xiàn)消息向上無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)消息向上無縫滾動效果的具體代碼，供大家參考，具體內容如下

代碼：

<ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
? <li v-for="item in noticeList">
? ? ...
? </li>
</ul>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? noticeList: [],
? ? ? ? animate:false,
? ? ? ? intNum: undefined,
? ? ? }
? ? },
? ? created: function () {
? ? ? this.getNoticeData();
? ? },
? ? methods: {
? ? ? getNoticeData() {
? ? ? ? this.$http.get('/news/allList', {
? ? ? ? ? params: {
? ? ? ? ? ? 'pageNumber': 10,
? ? ? ? ? ? 'currentPage': 1
? ? ? ? ? }
? ? ? ? }).then(res => {
? ? ? ? ? this.noticeList = res.data.items;
? ? ? ? ? this.ScrollUp();
? ? ? ? });
? ? ? },
? ? ? ScrollUp() {
? ? ? ? this.intNum = setInterval(() => {
? ? ? ? ? this.animate=true;// 向上滾動的時候需要添加css3過渡動畫
? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? this.noticeList.push(this.noticeList[0]);// 將數(shù)組的第一個元素添加到數(shù)組的
? ? ? ? ? ? this.noticeList.shift(); //刪除數(shù)組的第一個元素
? ? ? ? ? ? this.animate=false;
? ? ? ? ? },500)
? ? ? ? }, 10000);
? ? ? },
? ? ? //鼠標移上去停止
? ? ? Stop() {
? ? ? ? clearInterval(this.intNum);
? ? ? },
? ? ? Up() {
? ? ? ? this.ScrollUp();
? ? ? },
? ? }
? }
</script>

樣式

.new-list{
? ? line-height: 28px;
? ? transition: top 0.5s;
}
.anim{
? ? transition: all 0.5s;
? ? margin-top: -28px;//高度等于行高
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論