uniapp 无限滚动商品

<template>
	<view>
		<view id="dibu" class="container" ref="container">
			
			<view class="marquee1" id="marquee1">
				<view class="" style="width: 300rpx;height: 300rpx;background: #999;margin-left: 10rpx;color: #fff;display: inline-block;" v-for="(itme,index) in 4">
					{{index}}
				</view>
			</view>
			<view class="marquee2" id="marquee2">
				<view class="" style="width: 300rpx;height: 300rpx;background: #999;margin-left: 10rpx;color: #345323;display: inline-block;" v-for="(itme,index) in 4">
					{{index}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	
	export default {
		data() {
		    return {
		        
		        marqueeVar: null,
		        speed1: 0,
		        speed2: 0,
				width1:0,
				width2:0,
				speedW:0,
				windowWidth:400,
		    }
		},
		created() {
		    setTimeout(() => {
		  this.runMarquee()
		}, 1000)
		},
		onShow() {
			uni.getSystemInfo({
			    success: function (res) {
					this.windowWidth = res.windowWidth
			    }
			});
			
		},
		mounted() {
			this.width1 = (document.getElementById('marquee1').getBoundingClientRect().width)
			this.width2 = (document.getElementById('marquee2').getBoundingClientRect().width)
			this.speedW = this.speed2
			console.log(this.$refs.container,'//this.$refs.container')
			const container = this.$refs.container.$el; 
			let isDown = false, // 是否按下鼠标
				startX, // 鼠标起始位置
				scrollLeft; // 滚动条位置

			container.addEventListener('mousedown', (e) => {
				isDown = true;
				startX = e.pageX - container.offsetLeft;
				scrollLeft = container.scrollLeft;
			});

			container.addEventListener('mouseup', () => {
				isDown = false;
			});

			container.addEventListener('mousemove', (e) => {
				if (!isDown) return;
				e.preventDefault();
				const x = e.pageX - container.offsetLeft;
				const walk = (x - startX) * 2;
				container.scrollLeft = scrollLeft - walk;
			});
		},
		methods: {
		    
		    moveMarquee() {
		        
		        
		        
		        var width = this.width1 + this.width2 - this.windowWidth
		        var marquee1 = document.getElementById("marquee1");
		        var marquee2 = document.getElementById("marquee2");
		        this.speed1 -= 1;
		        this.speed2 = this.speedW - 1;
				// this.speed2 = this.speed2 - 1;
		        console.log(-this.speed2, -this.speed1 ,this.speed2,this.width1,'-this.speed2 ')
		        if (-this.speed2 >= width && -this.speed1 >= this.width1) {
		            //让speed1重新在原位置移动
		            this.speed1 = this.windowWidth;
					
		        }
				
		        if (-this.speed2 >= this.width1 + this.width2) {
		            //如果speed2的尾部移动到盒子的头部，让speed2跟在speed1之后移动
		            this.speed2 = 0
		        }
		        // marquee1.style.transform = "translateX(" + this.speed1 + "px)";
		        // marquee2.style.transform = "translateX(" + this.speed2 + "px)";
				
				marquee1.style.marginLeft = this.speed1 + "px";
				marquee2.style.marginLeft = this.speed2 + "px";
		    },
		    runMarquee() {
		        var dibu = document.getElementById("dibu");
		        
		        this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
		        
		        dibu.addEventListener('mouseenter', () => {
		            clearInterval(this.marqueeVar);
		            this.marqueeVar = null
		        })
		        
		        dibu.addEventListener('mouseleave', () => {
		            this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
		        }
		        )
				var marquee1 = document.getElementById("marquee1");
				var marquee2 = document.getElementById("marquee2");
				// console.log(marquee1.clientX,marquee1.diffX,marquee2.clientX,marquee1.diffX)
		    }
		},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		/* 将子元素横向排列 */
		white-space: nowrap;
		/* 避免子元素在父元素内换行 */
		overflow-x: auto;
		/* 显示横向滚动条 */
	}

	::-webkit-scrollbar {
		width: 0 !important;
	}

	::-webkit-scrollbar {
		width: 0 !important;
		height: 0;
	}
	
	
	.dibu2 {
	    width: 100%;
	    font-size: 32rpx;
	    overflow: hidden;
	    white-space: nowrap;
	    background: red;
		display: flex;
		/* flex-shrink: 0; */
	}
	view{
		/* width: 750rpx; */
		height: 300rpx;
		/* flex-shrink: 0; */
	}
	
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			/* padding-right: 80rpx; */
			}
	
	.marquee2{
		margin-left: 10rpx;
	}
	
	.marquee1{
		display: flex;
		
	}
	 
	#marquee1 {
	    display: inline-block;
		/* background: #999; */
		
	}
	 
	#marquee2 {
	    display: inline-block;
	}
</style>