vue实现横向无限滚动

原理
复制1份需要无限滚动的列表，当滚动到第一个列表的结尾处（第二个列表的开始处时），立刻替换位移到初始位置（x=0）由于当时场景与刚开始的场景完全相同，就实现了无缝滚动

<template><div><div class="scroll-temp"><div class="temp-box" ref="temp"><div v-for="v in 5" :key="v + '1'" class="li">{{ "name" + v }} 当前温度：<span :class="v.ts">{{ v }}℃</span>湿度：<span :class="v.hs">{{ v }}%</span></div><div v-for="v in 5" :key="v + '2'" class="li">{{ "name" + v }} 当前温度：<span :class="v.ts">{{ v }}℃</span>湿度：<span :class="v.hs">{{ v }}%</span></div></div></div></div>
</template><script>
let x = 0;
export default {data() {return {tempInterval: undefined};},components: {},computed: {},destroyed() {clearInterval(this.tempInterval);},mounted() {this.tempInterval = setInterval(this.rollTemp, 50);},methods: {rollTemp() {let all = 0;let count = this.$refs.temp.childElementCount;for (let i = 0; i < count; i++) {all += this.$refs.temp.children[i].offsetWidth;}let half = all >> 1;if (x < 1 - half) {x = 0;}x -= 2;this.$refs.temp.style.transform = "translateX(" + x + "px)";}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
.scroll-temp {background:black;font-size: 20px;top: 100px;left: 480px;width: 980px;color: #fff;height: 30px;line-height: 30px;overflow: hidden;.temp-box {white-space: nowrap;.li {display: inline;height: 30px;padding-right: 20px;}}
}
</style>

转载自：https://www.cnblogs.com/zjhblogs/p/13475801.html

https://www.cnblogs.com/zjjDaily/p/10675708.html

vue实现横向无限滚动相关推荐

vue内容横向循环滚动_vue文字横向滚动公告
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一.npm 安装如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用在main.js引入 import marq ...
vue内容横向循环滚动_在Vue中使用better-scroll实现横向滚动和竖向滚动
exportdefault{ name:"better_scroll", data() {return{ currentIndex:0, //当前显示的下标 listHeight: ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
[配置]vue无限滚动vue-infinite-scroll的配置
安装: npm i vue-infinite-scroll -D 引用: main.js中通过如下方式注册全局引用 import infiniteScroll from 'vue-infinite-s ...
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
vue无限滚动vue-infinite-scroll插件的配置及使用详解
Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现. 接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-infinite-scroll=&quo ...
Vue中如何进行滚动加载与无限滚动？
Vue中如何进行滚动加载与无限滚动? 随着Web应用程序的复杂性和数据量的增加,滚动加载和无限滚动成为了Web开发中常见的需求.在Vue中,我们可以使用一些插件和技术来实现这些功能. 本文将介绍Vue ...

vue实现横向无限滚动

vue实现横向无限滚动相关推荐

最新文章

热门文章