<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>
uniapp 无限滚动商品
最新推荐文章于 2024-07-11 11:04:12 发布