outsource/gift
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
zpc 2025-08-04 18:10:22 +08:00
parent 3d596e462d
commit e474d68188
1 changed files with 201 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
pages/index/index.vue
View File

@ -5,6 +5,32 @@
</image>
<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
style="width: 100%;position:fixed;top:10%" background-color="transparent" color="#000" />
<view class="auto-scroll-container" catchtouchmove="return false">
<!-- 滚动容器 -->
<scroll-view class="scroll-view" scroll-x :scroll-with-animation="false" ref="scrollView"
@scroll="onScroll">
<!-- 图片列表容器 (复制一份实现无缝滚动) -->
<view class="scroll-content" :style="{ transform: `translateX(${translateX}px)` }"
catchtouchmove="return false">
<view class="image-list" ref="imageList">
<view class="image-item" v-for="(item, index) in imageList" :key="index">
<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
</view>
</view>
<!-- 复制一份列表用于无缝衔接 -->
<view class="image-list copy-list" catchtouchmove="return false">
<view class="image-item" v-for="(item, index) in imageList" :key="'copy-' + index">
<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="center" @click="openReceivePop"
style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
@ -170,8 +196,56 @@ export default {
createTime: "",
number: "",
model: "",
recordList: []
recordList: [],
// 图片数据
imageList: [{
url: 'https://picsum.photos/300/200?random=1',
alt: '图片1'
},
{
url: 'https://picsum.photos/300/200?random=2',
alt: '图片2'
},
{
url: 'https://picsum.photos/300/200?random=3',
alt: '图片3'
},
{
url: 'https://picsum.photos/300/200?random=4',
alt: '图片4'
},
{
url: 'https://picsum.photos/300/200?random=5',
alt: '图片5'
},
{
url: 'https://picsum.photos/300/200?random=6',
alt: '图片6'
}
],
scrollTimer: null, // 滚动定时器
scrollSpeed: 1, // 滚动速度 (px/帧)
translateX: 0, // 位移量
listWidth: 0, // 列表宽度
isScrolling: false // 是否正在滚动
}
},
onReady() {
// 获取列表宽度
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.image-list').boundingClientRect(data => {
this.listWidth = data.width;
// 开始自动滚动
this.startAutoScroll();
}).exec();
});
},
onUnload() {
// 页面卸载时清除定时器
this.stopAutoScroll();
},
methods: {
@ -471,20 +545,45 @@ export default {
});
}
},
async getBannerList() {
const res = await this.request('getBannerList', 'GET', {});
console.log(res);
if (res.code == 200) {
this.bannerList = res.data;
// 开始自动滚动
startAutoScroll() {
this.stopAutoScroll(); // 先清除已有定时器
// 每16ms滚动一次 (约60帧/秒)
this.scrollTimer = setInterval(() => {
this.translateX -= this.scrollSpeed;
// 当滚动距离达到一个列表宽度时，重置位置实现无缝滚动
if (Math.abs(this.translateX) >= this.listWidth) {
this.translateX = 0;
}
this.isScrolling = true;
}, 16);
},
// 停止自动滚动
stopAutoScroll() {
if (this.scrollTimer) {
clearInterval(this.scrollTimer);
this.scrollTimer = null;
this.isScrolling = false;
}
},
// 监听滚动事件 (用于鼠标悬停暂停)
onScroll() {
// 可以在这里处理手动滚动后的逻辑
}
}
}
</script>
<style>
<style scoped>
.content {
width: 100%;
height: 100vh;
@ -502,4 +601,40 @@ export default {
border-bottom: 0.86px solid #e3e3e3;
}
.auto-scroll-container {
width: 100%;
overflow: hidden;
/* 隐藏滚动条 */
padding: 20rpx 0;
}
.scroll-view {
width: 100%;
white-space: nowrap;
/* 防止换行 */
}
.scroll-content {
display: flex;
}
.image-list {
display: flex;
flex-direction: row;
}
.image-item {
width: 240rpx;
height: 200rpx;
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
}
.item-image {
width: 100%;
height: 100%;
display: block;
}
</style>