本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码，供大家参考，具体内容如下
代码：
<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]);// 将数组的第一个元素添加到数组的
? ? ? ? ? ? this.noticeList.shift(); //删除数组的第一个元素
? ? ? ? ? ? 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;//高度等于行高
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。
经验首页