2024年前端最全vue大屏开发系列—列表无缝滚动之vue-seamless-scroll，高级web前端面试答案解析

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

官方文档：  vue-seamless-scroll的简介及使用教程 - Made with Vuejs

一 安装

npm安装 ：

npm install vue-seamless-scroll --save

yarn 安装：

yarn add vue-seamless-scroll

二 使用

全局注册：

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

局部注册：

注意这里分vue2和veu3注册

vue2:

import vueSeamless from 'vue-seamless-scroll'

vue3；找不到路径所以加了 /src

import vueSeamless from 'vue-seamless-scroll/src'

components: { vueSeamless },

三 简单使用

<div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </div>

四  应用

本文是在“物美智能”源码的基础上进行二次开发完成wumei-smart: 物美智能开源物联网平台，简单易用，可用于搭建物联网平台以及二次开发和学习。适用于智能家居、智慧办公、智慧社区、农业监测、水利监测、工业控制等。

也可以直接在lofTV-Screen代码上直接修改IofTV-Screen: 🔥一个基于 vue、datav、Echart 框架的物联网可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、数据滚动配置，内部图表自由替换、Mixins注入等功能，持续更新…

效果如下，技术点主要使用了

<template>
  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
    <component :is="components" :data="list" :class-option="defaultOption">
      <ul class="right_center ">
        <li class="right_center_item" v-for="(item, i) in list" :key="i">
          <span class="orderNum">{{ i + 1 }}</span>
          <div class="inner_right">
            <div class="dibu"></div>
            <div class="flex">
              <div class="info">
                <span class="labels ">设备ID：</span>
                <span class="contents zhuyao"> {{ item.serialNumber }}</span>
              </div>
              <div class="info time">
                <span class="labels">时间：</span>
                <span class="contents" style="font-size:12px"> {{ item.createTime }}</span>
              </div>
              <div class="info">
                <span class="labels1"
                >属性上报</span>
              </div>
            </div>


            <div class="flex">
              <div class="info">
                <span class="labels">设备名称：</span>
                <span class="contents "> {{ item.deviceName }}</span>
              </div>
              <div class="info">
                <span class="labels">属性：</span>
                <span class="contents ciyao" style="font-size:12px"> {{ item.identity }}</span>
              </div>
              <div class="info">
                <span class="labels">数值：</span>
                <span class="contents warning"> {{ item.logValue}}</span>
              </div>

            </div>
          </div>
        </li>
      </ul>
    </component>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height:200px" />

</template>

<script>
import { currentGET } from '@/api/bigScreen/modules'
import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
import Kong from '../components/kong.vue'
import {listAllDeviceLog} from "@/api/iot/deviceLog";

export default {
  components: { vueSeamlessScroll, Kong },

  data() {
    return {
      list: [],
      pageflag: true,
      defaultOption: {
        ...this.$store.state.settings.defaultOption,
        limitMoveNum: 3,
        singleHeight: 250,
        step:0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },

    };
  },
  computed: {
    sbtxSwiperFlag() {
      let ssyjSwiper = this.$store.state.settings.ssyjSwiper
      if (ssyjSwiper) {
        this.components = vueSeamlessScroll
      } else {
        this.components = Kong
      }
      return ssyjSwiper
    }
  },
  created() {
    this.getData()
  },

  mounted() { },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
           this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.settings.leftBottomTime);
    },
    getData() {
      this.pageflag = true

      listAllDeviceLog(this.queryParams).then(res => {
        if (!this.timer) {
          console.log("检测数据", res);
        }
        if (res.code == 200) {
          this.list = res.data;
          this.defaultOption.step=this.$store.state.settings.defaultOption.step
          this.switper();
        }
        else
        {
          this.pageflag =false;
          this.$Message.warning(res.msg);

        }

      })
    },

  },
};
</script>
<style lang='scss' scoped>
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }


    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;



###  最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。