11
This commit is contained in:
zpc
parent
3d596e462d
commit
e474d68188
|
|
@ -5,6 +5,32 @@
|
||||||
</image>
|
</image>
|
||||||
<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
|
<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
|
||||||
style="width: 100%;position:fixed;top:10%" background-color="transparent" color="#000" />
|
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"
|
<view class="center" @click="openReceivePop"
|
||||||
style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
|
style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
|
||||||
<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
|
<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
|
||||||
|
|
@ -141,38 +167,86 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
|
import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
|
||||||
import {
|
import {
|
||||||
processImage
|
processImage
|
||||||
} from '@/common/utils'
|
} from '@/common/utils'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
uniNoticeBar
|
uniNoticeBar
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getConfig();
|
this.getConfig();
|
||||||
var userId = uni.getStorageSync("user_id");
|
var userId = uni.getStorageSync("user_id");
|
||||||
if (!userId || userId == 0) {
|
if (!userId || userId == 0) {
|
||||||
this.login();
|
this.login();
|
||||||
}
|
}
|
||||||
this.userId = userId;
|
this.userId = userId;
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
bg: "",
|
bg: "",
|
||||||
userId: 0,
|
userId: 0,
|
||||||
imagePath: '',
|
imagePath: '',
|
||||||
name: "",
|
name: "",
|
||||||
phone: "",
|
phone: "",
|
||||||
base64: "",
|
base64: "",
|
||||||
workUnit: "",
|
workUnit: "",
|
||||||
address: "",
|
address: "",
|
||||||
createTime: "",
|
createTime: "",
|
||||||
number: "",
|
number: "",
|
||||||
model: "",
|
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: {
|
methods: {
|
||||||
request(url, method, data) {
|
request(url, method, data) {
|
||||||
|
|
@ -453,47 +527,72 @@ export default {
|
||||||
this.base64 = '';
|
this.base64 = '';
|
||||||
},
|
},
|
||||||
|
|
||||||
previewImage() {
|
previewImage() {
|
||||||
if (this.imagePath) {
|
if (this.imagePath) {
|
||||||
uni.previewImage({
|
uni.previewImage({
|
||||||
current: this.imagePath,
|
current: this.imagePath,
|
||||||
urls: [this.imagePath],
|
urls: [this.imagePath],
|
||||||
success: function (res) {
|
success: function(res) {
|
||||||
console.log('预览图片成功');
|
console.log('预览图片成功');
|
||||||
},
|
},
|
||||||
fail: function (err) {
|
fail: function(err) {
|
||||||
console.error('预览图片失败:', err);
|
console.error('预览图片失败:', err);
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '预览失败',
|
title: '预览失败',
|
||||||
icon: 'none'
|
icon: 'none'
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 开始自动滚动
|
||||||
|
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);
|
||||||
async getBannerList() {
|
},
|
||||||
const res = await this.request('getBannerList', 'GET', {});
|
|
||||||
console.log(res);
|
// 停止自动滚动
|
||||||
if (res.code == 200) {
|
stopAutoScroll() {
|
||||||
this.bannerList = res.data;
|
if (this.scrollTimer) {
|
||||||
|
clearInterval(this.scrollTimer);
|
||||||
|
this.scrollTimer = null;
|
||||||
|
this.isScrolling = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听滚动事件 (用于鼠标悬停暂停)
|
||||||
|
onScroll() {
|
||||||
|
// 可以在这里处理手动滚动后的逻辑
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
@ -501,5 +600,41 @@ export default {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
border-bottom: 0.86px solid #e3e3e3;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user