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

滚动列表.

Browse Source
This commit is contained in:
18631081161 2025-08-04 16:17:16 +08:00
parent 3d0186fff3
commit 42f6b2cbcc
6 changed files with 314 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
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,10 +196,58 @@
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: {
request(url, method, data) {
return new Promise((resolve, reject) => {
@ -448,13 +522,46 @@
}
});
}
},
// 开始自动滚动
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;
@ -472,4 +579,40 @@
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>

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/mp-weixin/common/vendor.js vendored
View File

@ -7042,7 +7042,7 @@ function isConsoleWritable() {
function initRuntimeSocketService() {
const hosts = "172.23.128.1,192.168.1.7,192.168.195.32,127.0.0.1";
const port = "8090";
const id = "mp-weixin_r5vw4B";
const id = "mp-weixin_1ZEevH";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();

181
unpackage/dist/dev/mp-weixin/pages/index/index.js vendored
View File

@ -28,9 +28,58 @@ const _sfc_main = {
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 = common_vendor.index.createSelectorQuery().in(this);
query.select(".image-list").boundingClientRect((data) => {
this.listWidth = data.width;
this.startAutoScroll();
}).exec();
});
},
onUnload() {
this.stopAutoScroll();
},
methods: {
request(url, method, data) {
return new Promise((resolve, reject) => {
@ -45,7 +94,7 @@ const _sfc_main = {
header,
timeout: 1e4,
success: (res) => {
common_vendor.index.__f__("log", "at pages/index/index.vue:193", "API响应:", res);
common_vendor.index.__f__("log", "at pages/index/index.vue:267", "API响应:", res);
if (res.statusCode === 200) {
resolve(res.data);
} else {
@ -53,7 +102,7 @@ const _sfc_main = {
}
},
fail: (err) => {
common_vendor.index.__f__("error", "at pages/index/index.vue:201", "API请求失败:", err);
common_vendor.index.__f__("error", "at pages/index/index.vue:275", "API请求失败:", err);
reject(err);
}
});
@ -61,7 +110,7 @@ const _sfc_main = {
},
async getConfig() {
const res = await this.request("config", "get", {});
common_vendor.index.__f__("log", "at pages/index/index.vue:209", res);
common_vendor.index.__f__("log", "at pages/index/index.vue:283", res);
if (res.home != "") {
this.bg = res.home;
}
@ -89,13 +138,13 @@ const _sfc_main = {
if (res.code == 200) {
common_vendor.index.setStorageSync("user_id", res.data.user_id);
this.userId = res.data.user_id;
common_vendor.index.__f__("log", "at pages/index/index.vue:238", "登录成功, userId:", this.userId);
common_vendor.index.__f__("log", "at pages/index/index.vue:312", "登录成功, userId:", this.userId);
} else {
common_vendor.index.__f__("error", "at pages/index/index.vue:240", "登录失败:", res.message);
common_vendor.index.__f__("error", "at pages/index/index.vue:314", "登录失败:", res.message);
}
}
} catch (error) {
common_vendor.index.__f__("error", "at pages/index/index.vue:244", "登录过程出错:", error);
common_vendor.index.__f__("error", "at pages/index/index.vue:318", "登录过程出错:", error);
}
},
openReceivePop() {
@ -114,11 +163,11 @@ const _sfc_main = {
title: "加载中..."
});
const result = await this.request("getRecord?userId=" + this.userId, "GET", {});
common_vendor.index.__f__("log", "at pages/index/index.vue:267", result);
common_vendor.index.__f__("log", "at pages/index/index.vue:341", result);
this.recordList = result.data;
common_vendor.index.__f__("log", "at pages/index/index.vue:272", "加载领取记录...");
common_vendor.index.__f__("log", "at pages/index/index.vue:346", "加载领取记录...");
} catch (error) {
common_vendor.index.__f__("error", "at pages/index/index.vue:274", "加载领取记录失败:", error);
common_vendor.index.__f__("error", "at pages/index/index.vue:348", "加载领取记录失败:", error);
}
common_vendor.index.hideLoading();
},
@ -134,14 +183,14 @@ const _sfc_main = {
base64,
path
} = await common_utils.processImage();
common_vendor.index.__f__("log", "at pages/index/index.vue:293", "最终Base64长度:", base64.length, path);
common_vendor.index.__f__("log", "at pages/index/index.vue:367", "最终Base64长度:", base64.length, path);
this.imagePath = path;
this.base64 = base64;
common_vendor.index.showToast({
title: "上传成功"
});
} catch (err) {
common_vendor.index.__f__("error", "at pages/index/index.vue:300", "处理失败", err);
common_vendor.index.__f__("error", "at pages/index/index.vue:374", "处理失败", err);
common_vendor.index.showToast({
title: "处理失败",
icon: "none"
@ -229,7 +278,7 @@ const _sfc_main = {
ProductImage: this.base64
};
const result = await this.request("addRecord", "POST", formData);
common_vendor.index.__f__("log", "at pages/index/index.vue:395", result);
common_vendor.index.__f__("log", "at pages/index/index.vue:469", result);
if (result.code == 200) {
common_vendor.index.showToast({
title: "提交成功，请等待审核",
@ -250,7 +299,7 @@ const _sfc_main = {
title: "提交失败，请重试",
icon: "none"
});
common_vendor.index.__f__("error", "at pages/index/index.vue:418", "提交失败:", error);
common_vendor.index.__f__("error", "at pages/index/index.vue:492", "提交失败:", error);
}
},
clearForm() {
@ -270,10 +319,10 @@ const _sfc_main = {
current: this.imagePath,
urls: [this.imagePath],
success: function(res) {
common_vendor.index.__f__("log", "at pages/index/index.vue:440", "预览图片成功");
common_vendor.index.__f__("log", "at pages/index/index.vue:514", "预览图片成功");
},
fail: function(err) {
common_vendor.index.__f__("error", "at pages/index/index.vue:443", "预览图片失败:", err);
common_vendor.index.__f__("error", "at pages/index/index.vue:517", "预览图片失败:", err);
common_vendor.index.showToast({
title: "预览失败",
icon: "none"
@ -281,6 +330,28 @@ const _sfc_main = {
}
});
}
},
// 开始自动滚动
startAutoScroll() {
this.stopAutoScroll();
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() {
}
}
};
@ -304,39 +375,55 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
["background-color"]: "transparent",
color: "#000"
}),
c: common_vendor.o((...args) => $options.openReceivePop && $options.openReceivePop(...args)),
d: common_vendor.o((...args) => $options.openRecordPop && $options.openRecordPop(...args)),
e: $data.name,
f: common_vendor.o(($event) => $data.name = $event.detail.value),
g: $data.phone,
h: common_vendor.o(($event) => $data.phone = $event.detail.value),
i: $data.workUnit,
j: common_vendor.o(($event) => $data.workUnit = $event.detail.value),
k: -1,
l: $data.address,
m: common_vendor.o(($event) => $data.address = $event.detail.value),
n: $data.model,
o: common_vendor.o(($event) => $data.model = $event.detail.value),
p: $data.number,
q: common_vendor.o(($event) => $data.number = $event.detail.value),
r: $data.createTime,
s: common_vendor.o(($event) => $data.createTime = $event.detail.value),
t: common_vendor.o((...args) => $options.seleImg && $options.seleImg(...args)),
v: $data.imagePath
c: common_vendor.f($data.imageList, (item, index, i0) => {
return {
a: item.url,
b: item.alt,
c: index
};
}),
d: common_vendor.f($data.imageList, (item, index, i0) => {
return {
a: item.url,
b: item.alt,
c: "copy-" + index
};
}),
e: `translateX(${$data.translateX}px)`,
f: common_vendor.o((...args) => $options.onScroll && $options.onScroll(...args)),
g: common_vendor.o((...args) => $options.openReceivePop && $options.openReceivePop(...args)),
h: common_vendor.o((...args) => $options.openRecordPop && $options.openRecordPop(...args)),
i: $data.name,
j: common_vendor.o(($event) => $data.name = $event.detail.value),
k: $data.phone,
l: common_vendor.o(($event) => $data.phone = $event.detail.value),
m: $data.workUnit,
n: common_vendor.o(($event) => $data.workUnit = $event.detail.value),
o: -1,
p: $data.address,
q: common_vendor.o(($event) => $data.address = $event.detail.value),
r: $data.model,
s: common_vendor.o(($event) => $data.model = $event.detail.value),
t: $data.number,
v: common_vendor.o(($event) => $data.number = $event.detail.value),
w: $data.createTime,
x: common_vendor.o(($event) => $data.createTime = $event.detail.value),
y: common_vendor.o((...args) => $options.seleImg && $options.seleImg(...args)),
z: $data.imagePath
}, $data.imagePath ? {
w: $data.imagePath,
x: common_vendor.o((...args) => $options.previewImage && $options.previewImage(...args))
A: $data.imagePath,
B: common_vendor.o((...args) => $options.previewImage && $options.previewImage(...args))
} : {}, {
y: common_vendor.o((...args) => $options.closeReceivePop && $options.closeReceivePop(...args)),
z: common_vendor.o((...args) => $options.submitForm && $options.submitForm(...args)),
A: common_vendor.sr("receivePop", "8f702d68-1"),
B: common_vendor.p({
C: common_vendor.o((...args) => $options.closeReceivePop && $options.closeReceivePop(...args)),
D: common_vendor.o((...args) => $options.submitForm && $options.submitForm(...args)),
E: common_vendor.sr("receivePop", "1cf27b2a-1"),
F: common_vendor.p({
type: "center",
["is-mask-click"]: false
}),
C: common_assets._imports_0,
D: common_vendor.o(($event) => $options.closeRecordPop()),
E: common_vendor.f($data.recordList, (item, k0, i0) => {
G: common_assets._imports_0,
H: common_vendor.o(($event) => $options.closeRecordPop()),
I: common_vendor.f($data.recordList, (item, k0, i0) => {
return {
a: common_vendor.t(item.name),
b: common_vendor.t(item.phone),
@ -345,12 +432,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
e: item.phone + item.time
};
}),
F: common_vendor.sr("recordPop", "8f702d68-2"),
G: common_vendor.p({
J: common_vendor.sr("recordPop", "1cf27b2a-2"),
K: common_vendor.p({
type: "center"
})
});
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1cf27b2a"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

2
unpackage/dist/dev/mp-weixin/pages/index/index.wxml vendored
View File

File diff suppressed because one or more lines are too long

34
unpackage/dist/dev/mp-weixin/pages/index/index.wxss vendored
View File

@ -1,5 +1,5 @@
.content {
.content.data-v-1cf27b2a {
width: 100%;
height: 100vh;
display: flex;
@ -8,9 +8,39 @@
justify-content: center;
position: relative;
}
.line {
.line.data-v-1cf27b2a {
width: 90%;
justify-content: center;
margin-top: 20rpx;
border-bottom: 0.86px solid #e3e3e3;
}
.auto-scroll-container.data-v-1cf27b2a {
width: 100%;
overflow: hidden;
/* 隐藏滚动条 */
padding: 20rpx 0;
}
.scroll-view.data-v-1cf27b2a {
width: 100%;
white-space: nowrap;
/* 防止换行 */
}
.scroll-content.data-v-1cf27b2a {
display: flex;
}
.image-list.data-v-1cf27b2a {
display: flex;
flex-direction: row;
}
.image-item.data-v-1cf27b2a {
width: 240rpx;
height: 200rpx;
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
}
.item-image.data-v-1cf27b2a {
width: 100%;
height: 100%;
display: block;
}