定制开发vue实现列表自动滚动的方式（一）

      定制开发虽然是标题是《vue定制开发实现列表自动滚动的方式》，定制开发但其它应该也可以通过定制开发这种方式实现，定制开发本案例中没有使用任何定制开发第三方插件，全部使用vue中相关的js、css定制开发以及定时器方式实现。

      定制开发解决问题的第一步不是找代码，定制开发而是分析问题。定制开发列表自动滚动常见方式有两种（定制开发上下左右的滚动不赘述，定制开发只是方向的问题，定制开发本案例以向上自动滚动为例）：（1）匀速滚动   （2）定制开发有间隔的平滑滚动。定制开发本案例先给出匀速滚动的方案。

     这篇文章是原创，代码是项目中自己编写的，所以运行肯定没有问题。

     要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的感觉。然后需要考虑列表衔接的问题，列表再长也有尽头，需要考虑滚动到最后一条数据出现时的问题。

     我给出的方案是，在列表的末尾拼接一个同样内容的列表，形成长度为原列表两倍的列表（如果考虑性能问题，在原列表后拼接上原列表的前几条数据就可以，具体几条根据滚动可视范围内的最大完整数据条数而定，具体往下看就明白了），然后当拼接列表滚动到可视范围内的内容和初始状态一致时（即拼接列表的上半段的最后一条记录向上滚动至完全消失时），将拼接列表向上滚动的距离归零，即可在视觉上给人一种匀速向上，且无限循环的感觉。

     先上定时器这块方法的代码。

  1. //根据列表长度是否超过可视范围内能够显示的最大完整数据条数，来控制列表是否需要滚动
  2. tableActionFun() {
  3.       this.tableListSize = this.tableList.length;
  4.       //下面的visibleSize是可视范围内能够显示的最大完整数据条数
  5.       if (this.tableListSize > this.visibleSize) {
  6.         this.tableList = this.tableList.concat(this.tableList);
  7.         this.tableTimerFun();  //列表滚动方法
  8.       } else {
  9.         this.fillTableList();  //无需滚动时的数据填充方法，如果没必要，可以删掉
  10.       }
  11. },
  12.  
  13. //列表滚动方法
  14. tableTimerFun() {
  15.       var count = 0;
  16.       this.tableTimer = setInterval(() => {
  17.         if (count < (this.tableList.length / 2) * this.lineHeight) {
  18.           this.tableTop -= 1;
  19.           count++;
  20.         } else {
  21.           count = 0;
  22.           this.tableTop = 0;
  23.         }
  24.       }, this.tableTimerInterval);
  25. },

      上面的代码段中提到了可视范围内能够显示的最大完整数据条数 visibleSize，直接上案例里的截图，一看就明白了。截图中可以看到第一条数据和最后一条数据并没有完全显示，因为他们超出父容器的部分被 overflow: hidden 了，所以案例中的 visibleSize = 6. 

     所以本案例是通过列表不断上移，父容器隐藏超出部分来实现列表自动迅速滚动的。讲解的过程中可能有遗漏，直接上完整代码，重要部分都写了注释。下面的代码直接粘贴运行不会运行成功，因为下面的完整代码涉及接口调用，但所有功能已经一步到位，希望在看的你能通过注释更多地去理解，而不是简单地复制粘贴。希望能对你有所帮助。

  1. <template>
  2.   <div class="productProcess">
  3.     
  4.     <!-- 如果页面刷新数据比较频繁，可以将loading、showFlag的相关代码删除，防止过于频繁的出现加载动画 -->
  5.     <div class="loading_div" v-show="!showFlag">
  6.       <div>Loading...</div>  <!-- 这个loading自己写，代码没贴出来 -->
  7.     </div>
  8.  
  9.     <div class="success_info_body" v-show="showFlag">
  10.       
  11.       <!-- 标准title可以调用组件 -->
  12.       <div class="title_div">
  13.         <!--  <titleComponent :title="title"></titleComponent> -->  <!-- 标题组件自己写，代码没贴出来 -->
  14.       </div>
  15.  
  16.       <!-- 参数名称、列数根据实际情况调整 -->
  17.       <div class="table_body">
  18.         <div class="table_th">
  19.           <div class="tr1 th_style">排产编号</div>
  20.           <div class="tr2 th_style">类型</div>
  21.           <div class="tr3 th_style">日期</div>
  22.           <div class="tr4 th_style">进度</div>
  23.         </div>
  24.         <div class="table_main_body">
  25.           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
  26.             <div class="table_tr" v-for="(item,index) in tableList" :key="index">
  27.               <div class="tr1 tr">{{item.planNo}}</div>
  28.               <div class="tr2 tr">{{item.type}}</div>
  29.               <div class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</div>
  30.               <div class="tr3 tr" v-else>-</div>
  31.               <div class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</div>
  32.               <div class="tr4 tr" v-else>-</div>
  33.             </div>
  34.           </div>
  35.         </div>
  36.       </div>
  37.     </div>
  38.   </div>
  39. </template>
  40.  
  41. <script>
  42. import titleComponent from "@/components/titleComponent";
  43. export default {
  44.   components: {
  45.     titleComponent
  46.   },
  47.   data() {
  48.     return {
  49.       showFlag: true,
  50.       tableTimer: null,
  51.       tableTop: 0,
  52.       tableList: [],
  53.       /* tableList 参考格式
  54.         [{
  55.           "process":0.0000,
  56.           "planNo":"BP2022060701",
  57.           "endDate":"2022-06-07",
  58.           "type":"砌块",
  59.           "startDate":"2022-06-07"
  60.         },
  61.         {
  62.           "process":0.0000,
  63.           "planNo":"WP2022061301",
  64.           "endDate":"2022-06-13",
  65.           "type":"墙板",
  66.           "startDate":"2022-06-13"
  67.         }]
  68.       */
  69.       tableListSize: 0,
  70.       componentTimer: null,
  71.  
  72.       //需要根据情况设置的参数
  73.       title: "排产进度",
  74.       visibleSize: 6, //容器内可视最大完整行数
  75.       lineHeight: 49, //每行的实际高度（包含margin-top/bottom,border等）
  76.       componentTimerInterval: 3600000, //刷新数据的时间间隔
  77.       tableTimerInterval: 100 //向上滚动 1px 所需要的时间，越小越快，推荐值 100
  78.     };
  79.   },
  80.  
  81.   //如果没有父元素传值，将watch内的内容搬至mounted中即可
  82.   props: ["activeFactoryId"],
  83.   watch: {
  84.     activeFactoryId(val, oldVal) {
  85.       clearInterval(this.componentTimer);
  86.       this.bsGetProductProcess();
  87.       this.componentTimerFun();
  88.     }
  89.   },
  90.   mounted() {
  91.  
  92.   },
  93.   beforeDestroy() {
  94.     clearInterval(this.componentTimer);
  95.     clearInterval(this.tableTimer);
  96.   },
  97.   methods: {
  98.     //调用数据接口，获取列表数据，根据自己情况填接口url
  99.     bsGetProductProcess() {
  100.       clearInterval(this.tableTimer);
  101.       this.tableTop = 0;
  102.       if (this.activeFactoryId != "") {
  103.         this.showFlag = false;
  104.         this.$ajax({
  105.           method: "get",
  106.           url: `` //根据自己情况填接口url
  107.         })
  108.           .then(res => {
  109.             this.tableList = res.data.data;
  110.             this.showFlag = true;
  111.             this.tableActionFun();
  112.           })
  113.           .catch(function(err) {
  114.             console.log("bsGetProductProcess error!");
  115.           });
  116.       }
  117.     },
  118.     tableActionFun() {
  119.       this.tableListSize = this.tableList.length;
  120.       if (this.tableListSize > this.visibleSize) {
  121.         this.tableList = this.tableList.concat(this.tableList);
  122.         this.tableTimerFun();
  123.       } else {
  124.         this.fillTableList();
  125.       }
  126.     },
  127.     //当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
  128.     fillTableList() {
  129.       var addLength = this.visibleSize - this.tableListSize;
  130.       for (var i = 0; i < addLength; i++) {
  131.         this.tableList.push({
  132.           planNo: "-",
  133.           type: "-",
  134.           startDate: "-",
  135.           endDate: "-",
  136.           process: "-"
  137.         });
  138.       }
  139.     },
  140.     tableTimerFun() {
  141.       var count = 0;
  142.       this.tableTimer = setInterval(() => {
  143.         if (count < (this.tableList.length / 2) * this.lineHeight) {
  144.           this.tableTop -= 1;
  145.           count++;
  146.         } else {
  147.           count = 0;
  148.           this.tableTop = 0;
  149.         }
  150.       }, this.tableTimerInterval);
  151.     },
  152.     componentTimerFun() {
  153.       this.componentTimer = setInterval(() => {
  154.         this.bsGetProductProcess();
  155.       }, this.componentTimerInterval);
  156.     }
  157.   }
  158. };
  159. </script>
  160.  
  161. <style scoped>
  162. .productProcess {
  163.   width: 550px;
  164.   height: 415px;
  165. }
  166. .loading_div {
  167.   color: #eee;
  168.   padding-top: 100px;
  169. }
  170. .title_div {
  171.   width: 100%;
  172. }
  173. .table_body {
  174.   width: 100%;
  175.   margin-top: 15px;
  176. }
  177. .table_th {
  178.   width: 100%;
  179.   display: flex;
  180.   height: 40px;
  181.   line-height: 40px;
  182. }
  183. .tr {
  184.   overflow: hidden;
  185.   text-overflow: ellipsis;
  186.   white-space: nowrap;
  187.   box-sizing: border-box;
  188.   padding: 0 5px;
  189.   text-align: center;
  190.   font-size: 14px;
  191. }
  192. .tr1 {
  193.   width: 28%;
  194. }
  195. .tr2 {
  196.   width: 15%;
  197. }
  198. .tr3 {
  199.   width: 35%;
  200.   font-size: 13px;
  201. }
  202.  
  203. .tr4 {
  204.   flex: 1;
  205. }
  206.  
  207. .th_style {
  208.   color: rgb(0, 221, 253);
  209.   font-weight: bold;
  210.   font-size: 18px;
  211.   overflow: hidden;
  212.   text-overflow: ellipsis;
  213.   white-space: nowrap;
  214.   box-sizing: border-box;
  215.   padding: 0 5px;
  216.   text-align: center;
  217. }
  218. .table_main_body {
  219.   width: 100%;
  220.   height: 294px;
  221.   overflow: hidden;
  222.   position: relative;
  223. }
  224. .table_inner_body {
  225.   width: 100%;
  226.   position: absolute;
  227.   left: 0;
  228. }
  229. .table_tr {
  230.   display: flex;
  231.   height: 40px;
  232.   line-height: 40px;
  233.   color: #eee;
  234.   font-size: 15px;
  235.   background: rgba(3, 145, 167, 0.1);
  236.   border: 1px solid rgb(4, 114, 131);
  237.   margin-top: 7px;
  238. }
  239. </style>

      最后是效果视频。

     下一篇文章将讲解有间隔的平滑滚动如何实现，虽然同样会使用到定时器，但会更多的使用到css的一些功能。

     大家若有什么疑问或者有其它想法可以在评论区留言，我会尽量解答和回复的。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发