11
This commit is contained in:
zpc
parent
3d596e462d
commit
e474d68188
|
|
@ -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>
|
||||
|
|
@ -141,38 +167,86 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
|
||||
import {
|
||||
processImage
|
||||
} from '@/common/utils'
|
||||
export default {
|
||||
components: {
|
||||
uniNoticeBar
|
||||
},
|
||||
onLoad() {
|
||||
this.getConfig();
|
||||
var userId = uni.getStorageSync("user_id");
|
||||
if (!userId || userId == 0) {
|
||||
this.login();
|
||||
}
|
||||
this.userId = userId;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bg: "",
|
||||
userId: 0,
|
||||
imagePath: '',
|
||||
name: "",
|
||||
phone: "",
|
||||
base64: "",
|
||||
workUnit: "",
|
||||
address: "",
|
||||
createTime: "",
|
||||
number: "",
|
||||
model: "",
|
||||
recordList: []
|
||||
}
|
||||
},
|
||||
import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
|
||||
import {
|
||||
processImage
|
||||
} from '@/common/utils'
|
||||
export default {
|
||||
components: {
|
||||
uniNoticeBar
|
||||
},
|
||||
onLoad() {
|
||||
this.getConfig();
|
||||
var userId = uni.getStorageSync("user_id");
|
||||
if (!userId || userId == 0) {
|
||||
this.login();
|
||||
}
|
||||
this.userId = userId;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bg: "",
|
||||
userId: 0,
|
||||
imagePath: '',
|
||||
name: "",
|
||||
phone: "",
|
||||
base64: "",
|
||||
workUnit: "",
|
||||
address: "",
|
||||
createTime: "",
|
||||
number: "",
|
||||
model: "",
|
||||
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) {
|
||||
|
|
@ -453,47 +527,72 @@ export default {
|
|||
this.base64 = '';
|
||||
},
|
||||
|
||||
previewImage() {
|
||||
if (this.imagePath) {
|
||||
uni.previewImage({
|
||||
current: this.imagePath,
|
||||
urls: [this.imagePath],
|
||||
success: function (res) {
|
||||
console.log('预览图片成功');
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('预览图片失败:', err);
|
||||
uni.showToast({
|
||||
title: '预览失败',
|
||||
icon: 'none'
|
||||
});
|
||||
previewImage() {
|
||||
if (this.imagePath) {
|
||||
uni.previewImage({
|
||||
current: this.imagePath,
|
||||
urls: [this.imagePath],
|
||||
success: function(res) {
|
||||
console.log('预览图片成功');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.error('预览图片失败:', err);
|
||||
uni.showToast({
|
||||
title: '预览失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 开始自动滚动
|
||||
startAutoScroll() {
|
||||
this.stopAutoScroll(); // 先清除已有定时器
|
||||
|
||||
// 每16ms滚动一次 (约60帧/秒)
|
||||
this.scrollTimer = setInterval(() => {
|
||||
this.translateX -= this.scrollSpeed;
|
||||
|
||||
// 当滚动距离达到一个列表宽度时，重置位置实现无缝滚动
|
||||
if (Math.abs(this.translateX) >= this.listWidth) {
|
||||
this.translateX = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
async getBannerList() {
|
||||
const res = await this.request('getBannerList', 'GET', {});
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
this.bannerList = res.data;
|
||||
|
||||
this.isScrolling = true;
|
||||
}, 16);
|
||||
},
|
||||
|
||||
// 停止自动滚动
|
||||
stopAutoScroll() {
|
||||
if (this.scrollTimer) {
|
||||
clearInterval(this.scrollTimer);
|
||||
this.scrollTimer = null;
|
||||
this.isScrolling = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 监听滚动事件 (用于鼠标悬停暂停)
|
||||
onScroll() {
|
||||
// 可以在这里处理手动滚动后的逻辑
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
<style scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 90%;
|
||||
|
|
@ -501,5 +600,41 @@ export default {
|
|||
margin-top: 20rpx;
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user