vue3 vue-seamless-scroll

main.ts

// @ts-ignore
import scroll from "vue-seamless-scroll/src";
app.use(scroll)

引用

<template><div class="give_an_alarm"><div class="level_title"><div class="top_level"></div><span>告警日志</span><div class="bottom_level"></div></div><div class="give_an_alarm_info"><div><div class="tr_alarm"><div class="info_date fl tc">日期</div><div class="info_type fl tc border_decorate">类型</div><div class="info_level fl tc border_decorate">等级</div><div class="info_area fl tc border_decorate">区域</div><div class="info_number fl tc border_decorate">设备编号</div><div class="info_temperature fl tc border_decorate">实时温度</div><div class="info_threshold fl tc border_decorate">超出阈值</div><div class="info_status fl tc border_decorate">状态</div></div></div>
<!--      <el-scrollbar class="give_an_alarm_info_ul">--><vue-seamless-scroll :data="the_alarm_log"   :class-option="optionHover" class="seamless-warp give_an_alarm_info_ul"><ul class="content"><li v-for="(val, key) in the_alarm_log"><div class="info_date">{{ val[ 'time' ] }}</div><div class="info_type">{{ val[ 'type' ] }}</div><div class="info_level">{{ val[ 'alarm_level' ] }}</div><div class="info_area">{{ val[ 'region_name' ] }}</div><div class="info_number">{{ val[ 'd_code' ] }}</div><div class="info_temperature">{{ val[ 'monitor_value' ] }}</div><div class="info_divreshold">{{ val[ 'warning_dit' ] }}</div><div class="info_status statusColor">{{ val[ 'status' ] }}</div></li></ul></vue-seamless-scroll>
<!--      </el-scrollbar>--></div></div>
</template><script>
import {theAlarmLog} from "../assets/js/api";
export default {data () {return {the_alarm_log:[]};},created() {//告警日志theAlarmLog().then(({data: {data}}) => {this.the_alarm_log = data})},computed: {optionHover () {return {// openWatch: true;step: 0.8,  //数值越大速度滚动越快//   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stop//   direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新dom// singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1//   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3// waitTime: 1000 // 单步运动停止的时间(默认值1000ms)};},},
};</script><style scoped>
.info_number{/*white-space: nowrap;*//*overflow: hidden;*//*text-overflow:ellipsis;*/
}
</style>

ScrollBoard.vue

<template><div><div><div><div><vue-seamless-scroll :data="listData"   :class-option="optionHover" class="seamless-warp"><ul class="item"><!--              //这一句在我的vue版本是必须的，用来防止eslint的检测错误--><!-- eslint-disable-next-line vue/require-v-for-key --><li v-for="item in listData"><div class="deviceClass" @mouseenter="immigration(data)" @mouseleave="shiftOut(data)"><div class="deviceImg"><img :src="imgHover"  ></div><div class="deviceTitle"><div class="deviceFont"><div class="devLabel">{{ item.title }}</div><div class="devCode">{{ item.date }}</div></div></div></div></li></ul></vue-seamless-scroll></div></div></div></div>
</template>
<script>
export default {data () {return {imgHover: require('../assets/img/cameraIconSmallHover.png'),imgPath: require('../assets/img/cameraIconSmall.png'),listData: [{title: "无缝滚动第一行无缝滚动第一行",date: "2017-12-16",},{title: "无缝滚动第二行无缝滚动第二行",date: "2017-12-16",},{title: "无缝滚动第三行无缝滚动第三行",date: "2017-12-16",},{title: "无缝滚动第四行无缝滚动第四行",date: "2017-12-16",},{title: "无缝滚动第五行无缝滚动第五行",date: "2017-12-16",},{title: "无缝滚动第六行无缝滚动第六行",date: "2017-12-16",},{title: "无缝滚动第七行无缝滚动第七行",date: "2017-12-16",},{title: "无缝滚动第八行无缝滚动第八行",date: "2017-12-16",},{title: "无缝滚动第九行无缝滚动第九行",date: "2017-12-16",},],};},computed: {optionHover () {return {// openWatch: true;//  step: 0, // 数值越大速度滚动越快//   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stop//   direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1//   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 10000000 // 单步运动停止的时间(默认值1000ms)};},},
};
</script>
<style lang="scss" scoped>
.seamless-warp {height: 288px;padding: 0 10px;overflow: hidden;.item{li{.deviceClass {display: flex;padding: 10px;box-sizing: border-box;border-bottom: 1px solid #082c51;border-right: none;.deviceTitle {padding-top: 3px;margin-left: 10px;color: rgb(123, 152, 188);font-size: 14px;.deviceFont {}}.deviceImg {margin-top: 2px;}&:hover {.deviceTitle{color: #fff !important;}border-image: linear-gradient(to left, rgba(59, 151, 208, 0), #3b97d0 60%) 1;background-image: -webkit-linear-gradient(left, rgba(0, 145, 223, 0.25) 0, rgba(0, 145, 223, 0) 80%);}}}}
}
</style>

vue3 vue-seamless-scroll相关推荐

vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
【uni-app、vue】scroll滑动、二级分类任性多选
<template><view><view class="uni-padding-wrap uni-common-mt"><view cl ...
vite + vue3 —— vue地图大屏项目
回顾前期前端利器 -- 提升<500倍开发效率> 传一张设计稿,点击一建生成项目好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点,那么我觉得就是它会,让你cv ...
vue3[Vue warn]: Failed to resolve component: XXX If this is a native custom element, make sure to ex
自定义标签存在,但是没有渲染报错: 原因: 改正前: <script> import {milldeLayoutInMain} from "../../components/h ...
vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分（webpack-dev-conf.js做后端接口代理+scroll插件）
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
【Vue】菜头学前端 - vue3学习笔记
目录简介一.创建项目 1.使用vue-clli创建 2.使用Vite创建二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...
【Vue】Vue全家桶（九）Vue3
文章目录 1 Vue3简介 2 创建Vue3工程 2.1 使用 vue-cli 创建 2.2 使用 vite 创建 3 分析文件目录 main.js App.vue 4 Composition 组合式 ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...

vue3 vue-seamless-scroll

vue3 vue-seamless-scroll相关推荐

最新文章

热门文章