无缝滚动效果 ，外加 手指的移动效果

思路：

1.无缝滚动1个内容区域，复制一下这个内容，追加到改内容的后面，形成无缝滚动的效果

2.手指左滑右滑进行x轴方向的加减

代码如下：

<template><div class="scroll-container" ref="container"><divclass="scroll-content"ref="content"@touchstart.stop="handlerTouchStart"@touchmove.stop="handlerTouchMove"@touchend.stop="handlerTouchEnd"><!-- 滚动内容放在这里 --><div class="list"><div v-for="(item, index) in list" :key="index"><img :src="item" alt="" /></div></div></div></div>
</template><script>
import a from "../assets/imgs/1.jpg";
import b from "../assets/imgs/2.jpg";
import c from "../assets/imgs/3.jpg";
import d from "../assets/imgs/4.jpg";
import e from "../assets/imgs/5.jpg";
import f from "../assets/imgs/6.jpg";
import g from "../assets/imgs/7.jpg";
import h from "../assets/imgs/8.jpg";
import i from "../assets/imgs/9.jpg";
import j from "../assets/imgs/10.jpg";export default {data() {return {list: [a, b, c, d, e, f, g, h, i, j],startLocation: 0, //手指起始位置step: 2, //移动步长offsetX: 0, //水平方向移动的距离timerid: null, //任务idmoveDistance: 0, //手指滑动的距离contentWidth: 0 //一个容器的宽度};},mounted() {this.$nextTick(() => {// 获取滚动内容元素和容器元素const content = this.$refs.content;const container = this.$refs.container;// 获取滚动内容的宽度this.contentWidth = content.offsetWidth;// 复制滚动内容并追加到原来的内容后面const clone = content.cloneNode(true);content.parentNode.appendChild(clone);// 设置滚动内容的总宽度，使其可以无限循环滚动container.style.width = this.contentWidth * 2 + "px";// 开启动画this.startAnimation();});},methods: {startAnimation() {this.offsetX += this.step;//   if (this.offsetX <= 0 || this.offsetX >= this.contentWidth) {//     this.offsetX = 0;//   }//   if (this.offsetX % this.contentWidth == 0) this.offsetX = 0;this.limitX();this.updateAnimate(this.offsetX);this.timerid = requestAnimationFrame(this.startAnimation);},updateAnimate(x) {this.$refs.container.setAttribute("style",`width:${2 * this.contentWidth}px;transform: translateX(${-x}px)`);},handlerTouchStart(e) {cancelAnimationFrame(this.timerid);this.startLocation = e.touches[0].pageX;},handlerTouchMove(e) {const current = e.touches[0].pageX;//   手指滑动距离this.moveDistance = Math.floor(e.touches[0].pageX - this.startLocation);if (current > this.startLocation) {// 往右划this.offsetX -= Math.abs(this.moveDistance);} else {// 往左滑this.offsetX += Math.abs(this.moveDistance);}//   判断边界距离this.limitX();//   if (this.offsetX <= 0 || this.offsetX >= 1000) {//     this.offsetX = 0;//   }//   if (this.offsetX % this.contentWidth == 0) this.offsetX = 0;this.updateAnimate(this.offsetX);},handlerTouchEnd() {this.startAnimation();},limitX() {if (this.offsetX <= 0 || this.offsetX >= this.contentWidth) {this.offsetX = 0;}if (this.offsetX % this.contentWidth == 0) this.offsetX = 0;}}
};
</script>
<style scoped lang="less">
.list {height: 100px;//   background: papayawhip;display: flex;div {width: 100px;height: 100px;img {width: 100%;height: 100%;}}
}
.scroll-container {overflow-x: scroll;white-space: nowrap;
}.scroll-content {display: inline-block;
}
.scroll-content {//   animation: scroll 20s linear infinite;
}// @keyframes scroll {
//   0% {
//     transform: translateX(0);
//   }
//   100% {
//     transform: translateX(-100%);
//   }
// }
</style>