首页 > 其他分享 >直播系统源代码,vue实现无缝滚动

直播系统源代码,vue实现无缝滚动

时间:2023-11-23 14:13:49浏览次数:29  
标签:box flex vue center translate height item 源代码 无缝

直播系统源代码,vue实现无缝滚动

一、采用js的方法实现

 


<template>
<div>
<div class="box">
<div v-for="item in 2" class="item-box" :style="{transform:'translate(0,'+scrollTop+'px)'}">
<div class="item" v-for="i in 9">{{i}}</div>
</div>
</div>
</div>
</template>
 
<script>
export default {
data() {
return {
scrollTop: 0,
}
},
onLoad() {
this.roll()
},
methods: {
roll() {
if (this.scrollTop == -300) {
this.scrollTop = 0
}
this.scrollTop -= 1;
setTimeout(() => {
this.roll()
}, 10)
},
}
}
</script>
<style>
.box {
width: 320px;
height: 300px;

overflow: hidden;
}
 
.box .item-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
 
.box .item-box .item {
width: 29%;
height: 29%;
margin: 1%;
background-color: paleturquoise;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
</style>

二、css动画实现

 


<template>
<div>
<div class="box">
<div v-for="item in 2" class="item-box">
<div class="item" v-for="i in 9">{{i}}</div>
</div>
</div>
</div>
</template>
 
<script>
export default {
data() {
return {}
},
methods: {
 
}
}
</script>
<style>
.box {
width: 320px;
height: 300px;

overflow: hidden;
}
 
.box .item-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
animation: roll 5s linear infinite;
}
 
.box .item-box .item {
width: 29%;
height: 29%;
margin: 1%;
background-color: paleturquoise;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
 
@keyframes roll {
0% {
transform: translate(0, 0px);
}
 
20% {
transform: translate(0, -60px);
}
 
40% {
transform: translate(0, -120px);
}
 
60% {
transform: translate(0, -180px);
}
 
80% {
transform: translate(0, -240px);
}
 
100% {
transform: translate(0, -300px);
}
}
</style> 

 

以上就是 直播系统源代码,vue实现无缝滚动,更多内容欢迎关注之后的文章

 

标签:box,flex,vue,center,translate,height,item,源代码,无缝
From: https://www.cnblogs.com/yunbaomengnan/p/17851403.html

相关文章

  • 直播平台源码,vue图片中划框截取部分图片
    直播平台源码,vue图片中划框截取部分图片 <template> <div>  <el-dialogtitle="请在图片上画出需要新增故障的位置":visible.sync="dialogVisible"width="1270px":before-close="handleClose":close-on-click-modal="false":close......
  • Vue自定义页面路由
    错误1:webpackEmptyContext(evalat./src/store/modulessyncrecursive(0.js:10),<anonymous>:2:10)路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错//假如path='@/views/user'constcom=()=>import(path)//这......
  • VUE组件使用
    vue组件使用分三步: 1.引用组件importfacePopfrom'./components/facePop'2.注册组件components={facePop}3.使用组件<facePop></facePop>新建一个components文件夹存放组件src/components/facePop.vue<template><div><h2>我是一个facePop组......
  • web图片上传 【flask+vue2】
    直接上传代码demofromflaskimportFlask,request,jsonifyimportosfromflask_corsimportCORS#导入CORS模块#文件存储的目录UPLOAD_FOLDER='uploads'ALLOWED_EXTENSIONS={'png','jpg','jpeg','gif'}app=Flask(_......
  • vue element 表格定位到某行
    /***@description:通过表格索引定位表格的位置*@param{refName}table的ref值*@param{index}table的索引值*@return:*@author:hch*/$tableScrollMove(refName,index=0){if(!refName||!this.$refs[refName])r......
  • vue 插槽上绑定得数据
    <templateslot-scope="scope"><el-button@click="handleClick(scope.row)"type="text"size="small">查看</el-button><el-buttontype="text"size="small">编辑<......
  • VUE CORS
    在Vue.js中,前端是在浏览器中运行的,因此CORS(跨域资源共享)问题通常是在后端解决的。Vue.js本身并不提供直接的方法来处理CORS。以下是一些可能的解决方法:1.使用代理VueCLI提供了一个开发服务器配置文件vue.config.js,你可以在这个文件中配置代理。这个代理只在开发环境中......
  • 关于FastAPI与Vue3的通信
    学习一下前后端分离技术,前端采用三大框架之一的Vue.js,后端则采用Python的FastAPI框架。一、前端设计1.建目录mydemo2.在mydemo目录下打开命令行,运行:npminitvue@latest(这里如果cmd卡死了,就ctrl+C结束,再次运行npminitvue@latest)3.工程名设置为 frontend ,其余按默......
  • vue中watch、computed、methods的执行顺序
    一、默认加载情况如果watch不加immediate:true属性(页面初加载的时候,不会执行watch,只有值变化后才执行),则只执行computed(在mounted后执行);如果watch添加immediate:true属性(在beforeCreate后created前执行),则先执行watch、再执行computed;二、触发某一事件后先执行method,再watch,再......
  • Spring+Vue修改功能
    后端数据回显,根据ID回显@GetMapping("/findById/{id}")publicUsersfindById(@PathVariable("id")Integerid){returnusersRepository.findById(id).get();}修改数据,根据回显的数据回显@PutMapping("/update")publicStringupd......