大家好我是菜鸟前端学有引力，这是我的第一篇文章，我希望把我在工作上遇到的一些业务问题和解决方法教给大家，如果有错误和不足，希望大家多多交流指正~

正片：

今天老板来需求了！要求要在网页上方加一个实时更新数据的滚动公告栏，具体需求是什么呢：

1. 可以像公告栏一样，滚动数据，把滚动数组里面的数据展示

1. 每间隔一段时间调用一次接口获取最新滚动数据，比对新旧数组，如果有新的数据要添加在尾部让其滚动展示

简单来说就是滚动展示数据，有新的数据添加进旧数组的尾部并滚动。

而滚动的思路是通过外层div的srcollTop属性值递增来实现的，废话不多说我们上代码！

1.html

      <!-- 大div --><div class="scrollBox"><!-- 外层div用于通过其scrollTop属性实现滚动 --><div class="s-outsideBox" id="box"><!-- 内层div用于比较滚动距离判断滚动暂停或继续 --><div id="list"><!-- 遍历滚动数组 --><divclass="s-list"v-for="(item,index) in scrollList":key="item.id"><!-- 展示滚动数据 --><span class="s-item flex">{{item.title}}</span></div></div></div></div>

2.css

       <style>body,html {padding: 0;box-sizing: border-box;height: 100%;width: 100%;background-color: #f7f7f7 !important;}.scrollBox {margin: 0 auto; /* 让div居中 */width: 800px;height: 116px;border-radius: 20px;padding: 10px 0;margin-top: 40px;background-color: rgba(172, 28, 38, 0.2);}.s-outsideBox {overflow: hidden; /*把内部多出部分隐藏 */width: 100%;height: 100%;}.s-list {display: flex;flex-direction: column;flex-wrap: nowrap;padding-bottom: 4px;}.s-item {line-height: 26px;width: 100%;text-align: center;color: white;}</style>

1. js代码（用的是CDN引入的vue，所以是vue写法）

  <script>new Vue({el: "#app",data() {return {scrollList: [{id: 001,title: "鱼香肉丝没有鱼",time:'2023-1-12 12:31:02'},{id: 002,title: "老婆饼里没有饼",time:'2023-1-12 13:31:02'},{id: 003,title: "蚂蚁上树没有蚂蚁",time:'2023-1-12 14:31:02'},{id: 004,title: "麻婆豆腐没有麻婆",time:'2023-1-12 15:31:02'},{id: 005,title: "温馨提示不温馨",time:'2023-1-12 16:31:02'},{id: 006,title: "你没有女朋友....",time:'2023-1-12 17:31:02'},],};},methods: {//滚动函数scrollUp() {let timer = setInterval(() => {//当内层展示的列表高度减去外层盒子高度小于盒子滚动距离时，继续滚动，反之暂时暂停if (box.scrollTop < list.offsetHeight - box.offsetHeight) {box.scrollTop++; } else {//到了就返回等待接口最新数据更新再滚动,这里不要清除定时器，否则有新数据push时就不会滚动了return;}}, 30);},//获取初始滚动展示数据getFirstSrollList() {axios({method: "GET",headers: { "content-type": "application/json" },url: "请求地址",params: {},}).then((res) => {if (res.status == "200") {//调用失败输出错误if (res.data.error) {//这用了elementui的$alertthis.$alert(`${data.error}`, {confirmButtonText: "我知道了",callback: (action) => {},});return;} else {//获取数据let that = this,data = res.data;// 由于获取的数据是按时间顺序排列，所以需要将数组倒序处理that.scrollList = data.reverse();this.scrollUp(); //随即调用滚动函数}}});},getnews() {// 每隔50s调用一次接口，比较新旧数据，有新增则添加至旧数组中let timer = setTimeout(() => {axios({method: "GET",headers: { "content-type": "application/json" },url: "请求头",params: {},}).then((res) => {if (res.status == "200") {if (res.data.error) {//这用了elementui的$alertthis.$alert(`${data.error}`, {confirmButtonText: "我知道了",callback: (action) => {},});return;} else {let that = this,data = res.data.reverse();// 比对新旧数据过滤出旧数据里没有的新数据并存为addListlet addList = data.filter((item) =>!this.scrollList.some((ele) => ele.id === item.id));//如果不为空则push进旧数据列表if (addList.length >= 1) {for (var i in addList) {this.scrollList.push(addList[i]);}}}}});this.getnews();}, 50000);},},mounted() {//先通过id获取元素本身var box = document.getElementById("box");var list = document.getElementById("list");//调用初始数据接口并启动滚动函数this.getFirstSrollList(); //获取初始滚动数据列表//调用获取新数据接口this.getnews();},});</script>

好了这就是我的解决思路和代码！希望能够帮助到你，里面没有考虑兼容和性能，我也是刚入门两三个月的菜鸟，希望通过努力慢慢进步，一起加油吧~~~