总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

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 },

####  三 简单使用

```

四  应用

本文是在“物美智能”源码的基础上进行二次开发完成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;

.dibu {

position: absolute;

height: 2px;

width: 104%;

background-image: url("../../../assets/bigScreen/img/zuo_xuxian.png");

bottom: -12px;

left: -2%;

background-size: cover;

}

}

.info {

margin-right: 10px;

display: flex;

align-items: center;

.labels {

flex-shrink: 0;

font-size: 12px;

color: rgba(255, 255, 255, 0.6);

}

### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

* 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

![](/uploads/2024/06/18/1718683411902094420.webp)

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！