首页 > 其他分享 >直播app开发,CSS3动画实现左右无缝滚动图

直播app开发,CSS3动画实现左右无缝滚动图

时间:2023-09-14 14:11:11浏览次数:41  
标签:CSS3 动画 console log res app shortRouteList

直播app开发,CSS3动画实现左右无缝滚动图

<view class="shortList_con">
<view class="scrollCon" :style="'width:' + (shortRouteList.length)*210 + 'rpx'">
<view class="shortItem" v-for="(item, index) in shortRouteList" :key="index">
<text>{{index}}</text>
</view>
</view>
</view>
 
<script>
export default {
data() {
return {
// 数据列表
shortRouteList: [],
}
},
methods: {
// 获取数据列表
getShortRouteList() {
var _this = this;
_this.$u.get('/api/**/getList', {
pages: 1,
limit: 10,
}).then(res => {
uni.hideLoading();
console.log("==获取数据列表==");
console.log(res);
var shortRouteList = res.data;
shortRouteList = shortRouteList.concat(shortRouteList);
// console.log(shortRouteList)
_this.shortRouteList = shortRouteList;
}).catch(res => {
console.log(res);
})
},
}
}
</script>
 
<style scoped>
    .shortList_con {
width: 100%;
overflow: hidden;
}
 
.shortList_con .scrollCon {
white-space: nowrap;
animation: marquee 60s infinite linear normal;
}
 
@keyframes marquee {
0% {
transform: translateX(0);
}
 
100% {
transform: translateX(-100%);
}
}
 
.shortItem {
display: inline-block;
width: 210rpx;
height: 300rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 20rpx;
position: relative;
}
 
.shortItem:last-child {
margin-right: 0;
}
 
.shortItem text {
font-size: 32rpx;
font-weight: bold;
text-align: center;
}
<style>

​以上就是 直播app开发,CSS3动画实现左右无缝滚动图,更多内容欢迎关注之后的文章

 

标签:CSS3,动画,console,log,res,app,shortRouteList
From: https://www.cnblogs.com/yunbaomengnan/p/17702353.html

相关文章

  • 三星大拿讲appstore和电商
    哈哈,最近一直忙于工作,没怎么上来写blog。继上次请华为两位老师来讲互联网云服务后,上周三的午间培训我们团队又请来一位重量级人物--来自三星(中国)的闫老师讲AppStore和电商的相关知识。在此首先感谢闫老师!其次,通过闫老师的精彩讲解,我对互联网/移动互联网行业又有了新的认识,真是大......
  • JMS connection pools and sessions pools in WebSphere Application Server
    转载:[url]http://www-01.ibm.com/support/docview.wss?uid=swg21168924QuestionFrequentlyAskedQuestionsconcerningconnectionpoolsandsessionspoolsinIBM®WebSphere®ApplicationServer.AnswerQ:WebSphereMQQueueConnectionFactoriesinWebSphere......
  • uni-app 自定义头部 安全距离
    APP.vue  divHeight:'', paddingHeight:'',方法uni.getSystemInfo({ success:(res)=>{ //获取到手机状态栏的高度 letmenuButtonInfo=uni.getMenuButtonBoundingClientRect() console.log('右边胶囊信息',menuButtonInfo) ......
  • 【动画进阶】当路径动画遇到滚动驱动!
    我的小册 《CSS技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的CSS内容,可以猛击- LINK。本文,我们将一起利用纯CSS,实现如下这么个酷炫的效果:在一年前,我介绍了CSS中非常新奇有趣的一个新特性--@scroll-timeline:革命性创新,动画杀手锏@scroll-timeline。......
  • 使用 SAP Business Application Studio Data Editor 生成 Mock Data
    SAPBusinessTechnologyPlatform(BTP)是SAP提供的一种综合性云平台,用于构建、扩展和集成企业应用程序。它为企业提供了一个强大的工具集,以支持数字转型和业务创新。在BTP上,BusinessApplicationStudio(BAS)是一个云集成开发环境,它为开发人员提供了一种轻松创建、管理和......
  • [Microsoft Azure] Azure App Service 如何查看实时日志
    本文将介绍如何在AzureAppService中查看实时日志,以便实时监控应用程序的运行状况和性能。在处理AzureAppService上运行的应用程序时,查看实时日志对于监控应用程序性能和诊断问题非常重要。实时日志可以帮助我们快速发现并解决潜在问题。步骤1:登录到Azure门户首先,......
  • 【小沐学Unity3d】3ds Max 骨骼动画制作(Physique 修改器)
    1、简介官方网址:https://help.autodesk.com/view/3DSMAX/2018/CHS/?guid=GUID-22E831B0-8B6B-4759-B5FB-4B86B6276A00使用Physique修改器可将蒙皮附加到骨骼结构上,比如Biped。蒙皮是一个3dsMax对象:它可以是任何可变形的、基于顶点的对象,如网格、面片或图形。当以附加蒙皮......
  • uniapp项目实践总结(十五)使用websocket实现简易聊天室
    导语:在一些社交软件中,经常可以看到各种聊天室的界面,接下来就总结一下聊天室的原理个实现方法,最后做一个简易的聊天室,包括登录/登出、加入/离开房间、发送接收聊天消息等功能。目录准备工作原理分析组件实现实战演练服务端搭建案例展示准备工作在pages/index文件夹下......
  • Vue H5 Swiper 动画
    简介及使用教程VueH5Swiper是一个H5移动滑块组件,适用于H5应用程序,轻量。安装Npmnpmivue-h5-swiperYarnyarnaddvue-h5-swiper使用引入import{Swiper,SwiperItem}from'vue-h5-swiper';注册exportdefault{components:{Swiper,Swiper......
  • 闪电WhatsApp云控
    WhatsApp作为全球使用率最高的应用程序之一,跟我们国内的微信、QQ类似,都是用来与用户进行交谈交友的平台,在全球180多个国家或地区深受欢迎,月活跃用户量是非常庞大的。做海外营销,你肯定是离不开WhatsApp的。不知道大家有没有听过WhatsApp云控?WhatsApp云控是第三方公司开......