vue非插件实现列表无限循环滚动-关于异步获取数据的疑问
本帖最后由 Dellevin 于 2023-5-12 10:33 编辑各位大佬好，我有一个问题！本人前端小白，我需要实现一个无限无缝滑动的功能。参考了这个代码：https://blog.csdn.net/weixin_41683949/article/details/125892840
但是把，写死数据的时候是可以实现列表无限无缝滑动的。但是axios异步请求数据的时候就出现了无法无限滑动的情况，滑动操作只会出现一次。
思考之后发现是因为在初始化的时候
this.copyHtml = this.$refs.scrollItemBox.innerHTML
这一行代码并没有实现对上面的列表数据的复制。
目前我只能想到的是一个比较愚蠢的解决办法。就是说在滚动的时候，滚动一下下就调用这个复制方法，但是这样的内存消耗应该是以有些较大的，在dom层不断地复制复制复制。。。
看到里面的一行注释说“ // 如果列表数据是异步获取的，记得初始化在获取数据后再调用”，因为涉及前端不是很深，不明白为什么初始化赋值可以在获取数据之后建立。。。希望有大佬能够解答一下。。。具体解决办法能否告知，万分感谢！！！！想要学习明白一二。
```vue
<template>
<!-- 平台成果-->
<div class="platform-outcomes">
<div class="imgTitle">
<img src="../assets/img/news.png" alt="新闻png">
<span>政策要闻</span>
</div>
<!-- 新闻展示div -->
<div class="box">
<div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
<div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
<div ref="scrollItemBox">
<div class="scroll_item" v-for="(item, index) in newsData" :key="index">
<div class="newsFont">
<img src="../assets/img/little_news.png" alt="新闻小图标">
</div>
<div class="newsMessage">
<a :href="item.sciUrl" target="_blank">
<p v-bind:style="{ fontWeight: 'bold' }">
{{ item.content }}
</p>
</a>
</div>
</div>
</div>
<div v-html="copyHtml"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
scrollTop: 0, //列表滚动高度
speed: 50, //滚动的速度
newsData: [
// {
// 'content': '科创金融为科创企业注入金融“活水”',
// 'sciUrl': 'https://finance.sina.com.cn/jjxw/2023-04-15/doc-imyqknmc2885203.shtml',
// }, {
// 'content': '工商银行 坚定不移推进高质量发展 在服务中国式现代化进程中展现新担当',
// 'sciUrl': 'http://paper.people.com.cn/rmrb/html/2023-03/10/nw.D110000renmrb_20230310_1-12.htm',
// }, {
// 'content': '让科创企业股权“软实力”变融资“硬通货”',
// 'sciUrl': 'http://www.ccb.com/cn/ccbtoday/newsv3/20230414_1681445103.html',
// }, {
// 'content': '建设高质量科创板，更好促进科技、资本和产业良性循环',
// 'sciUrl': 'http://www.sse.com.cn/aboutus/mediacenter/hotandd/c/c_20221122_5712368.shtml',
// }, {
// 'content': '国泰君安发布服务上海科创中心建设行动方案_中国经济网——国家经济门户',
// 'sciUrl': 'http://finance.ce.cn/stock/gsgdbd/202305/06/t20230506_38533924.shtml.',
// }, {
// 'content': '中国人民银行营业管理部召开2023年第二季度新闻发布会',
// 'sciUrl': 'https://finance.sina.com.cn/money/bank/bank_yhfg/2023-04-27/doc-imyrvnht4400317.shtml',
// }, {
// 'content': '中国农业银行联合多家机构成功举办2023科创金融论坛',
// 'sciUrl': 'http://finance.people.com.cn/n1/2023/0426/c1004-32674304.html',
// }, {
// 'content': '中国科协启动“科创中国”金融伙伴计划- 社会综合',
// 'sciUrl': 'https://www.chinanews.com.cn/sh/2023/02-20/9957121.shtml',
// }, {
// 'content': '2023济南科创金融论坛举行马建堂袁亚湘作主旨演讲袁炳忠刘强致辞',
// 'sciUrl': 'http://jntzcjj.jinan.gov.cn/art/2023/4/15/art_88379_4775055.html',
// }, {
// 'content': '济南市政府门户网站新闻刘强会见出席2023济南科创金融论坛嘉宾',
// 'sciUrl': 'http://www.jinan.gov.cn/art/2023/4/14/art_22405_4947838.html',
// }, {
// 'content': '全国关注济南！科创+金融，一场盛会激涌发展“活水” ',
// 'sciUrl': 'https://new.qq.com/rain/a/20230415A01HXN00',
// }
], //表示有多少个列表项
copyHtml: '', //复制多一份防止滚动到后面出现空白
msg: '',
outcomes: {
companyNum: '',
financingNum: '',
financingTotalAmount: ''
},
}
},
//同步执行的，意味着在该函数内的代码将在组件创建完成前立即执行
//可以在该函数下完成一些初始化的工作
created() {
this.initData();
},
mounted() {
// 如果列表数据是异步获取的，记得初始化在获取数据后再调用
this.initScroll();
},
methods: {
//获取政务新闻条例
initData() {
axios.get('http://localhost:8080//index/sciindexnews/page?limit=14&page=1').then((res) => {
this.newsData = res.data.data.list
}).catch((err) => {
console.log(err)
alert('请求出错！')
})
},
//以下是实现滚动的
initScroll() {
this.$nextTick(() => {
this.copyHtml = this.$refs.scrollItemBox.innerHTML
this.startScroll()
})
},
// 鼠标移入停止滚动
mEnter() {
clearInterval(this.timer);
},
// 鼠标移出继续滚动
mLeave() {
this.startScroll()
},
// 开始滚动
startScroll() {
//添加this指向，告诉他是自己的这个time，如果不加的话，没办法识别了
this.timer = setInterval(this.scroll, this.speed);
},
// 滚动处理方法
scroll() {
//用于复制上一次出现的所有数据，因为在使用axios之后滚动数据只会滚动一次，也就是说没有调用copyHtml所以退而求其次用这个
this.copyHtml = this.$refs.scrollItemBox.innerHTML
this.scrollTop++
// 获取需要滚动的盒子的高度
let scrollItemBox = this.$refs.scrollItemBox.offsetHeight;
// 当判断滚动的高度大于等于盒子高度时，从头开始滚动
if (this.scrollTop >= scrollItemBox) {
this.scrollTop = 0
}
},
},
}
</script>
<style scoped>
a {
color: #000;
}
.newsMessage {
padding-left: 7%;
}
.newsFont {
text-align: left;
padding-left: 2%;
}
.scroll_parent_box {
width: 90%;
height: 100%;
/*边框*/
/* border: 1px solid #ebeef5;*/
overflow: hidden;
box-sizing: border-box;
padding: 0 10px;
}
.scroll_list {
transition: all 0ms ease-in 0s
}
.scroll_item {
height: 40px;
line-height: 40px;
/* text-align: center; */
font-size: 14px;
}
.platform-outcomes {
width: 1920px;
height: 600px;
background-image: url("../assets/img/chengguobg.jpg");
background-repeat: no-repeat;
background-size: 100%;
/* background-position: center; */
padding-left: 300px;
padding-top: 80px;
}
.platform-outcomes .imgTitle {
padding-left: 10px;
}
.platform-outcomes .imgTitle span {
font-size: 25px;
font-weight: 700;
color: #313233;
margin-left: 10px;
margin-top: 15px;
}
.platform-outcomes .box {
padding-left: 10%;
/* box内的滚动条向左偏移10% */
width: 1200px;
height: 380px;
/* background: skyblue; */
background: white;
float: left;
margin-top: 35px;
margin-right: 10px;
border-top: 8px solid #d6ba83;
border-bottom: 8px solid #d6ba83;
}
.platform-outcomes .box ul {
margin-left: 80px;
margin-right: 80px;
margin-top: 25px;
/* background:white; */
}
/* 背景图 3张 */
.platform-outcomes .box .building {
background: url("../assets/img/chengguo1bg.png") no-repeat;
background-position: center center;
}
.platform-outcomes .box .book {
background: url("../assets/img/chengguo2bg.png") no-repeat;
background-position: center center;
}
.platform-outcomes .box .money {
background: url("../assets/img/chengguo3bg.png") no-repeat;
background-position: center center;
}
.platform-outcomes .box ul span {
font-size: 30px;
font-weight: 500;
color: #cc4f4f;
}</style>
``` this.initScroll()放到initdata方法里axios获取到数据后面就行了 linguo2625469 发表于 2023-5-12 09:50
this.initScroll()放到initdata方法里axios获取到数据后面就行了
好了好了，谢谢大佬！！我的理解能力有些差。。麻烦了
谢谢分享，刚好需要~~ Dellevin 发表于 2023-5-12 09:59
好了好了，谢谢大佬！！我的理解能力有些差。。麻烦了
那就帮忙评个分吧~ linguo2625469 发表于 2023-5-12 10:04
那就帮忙评个分吧~
评分完毕！！！感谢感谢，学到了，学到了
页:
[1]