1054425342@qq.com
1 month ago
6 changed files with 375 additions and 403 deletions
@ -1,389 +1,378 @@ |
|||||
<template> |
<template> |
||||
<view class="product-section"> |
<view class="product-section"> |
||||
<view class="title-section"> |
<view class="title-section"> |
||||
<div |
<div style=" |
||||
style=" |
|
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
" |
"> |
||||
> |
<text class="title">文化IP合作体</text> |
||||
<text class="title">文化IP合作体</text> |
</div> |
||||
</div> |
</view> |
||||
</view> |
<!-- 轮播容器 --> |
||||
<!-- 轮播容器 --> |
<view class="carousel-container"> |
||||
<view class="carousel-container"> |
<!-- 左箭头 --> |
||||
<!-- 左箭头 --> |
<view class="nav-arrow left-arrow" @click="prevSlide" v-if="list.length > 1 && currentIndex > 0"> |
||||
<view |
<image style="width: 50rpx;height: 50rpx;" |
||||
class="nav-arrow left-arrow" |
:src="showImg('/uploads/20250908/29beeddf1e45571d2c5a4187f2f1ae05.png')"></image> |
||||
@click="prevSlide" |
</view> |
||||
v-if="list.length > 1 && currentIndex > 0" |
|
||||
> |
<!-- 轮播内容 --> |
||||
<image style="width: 50rpx;height: 50rpx;" :src="showImg('/uploads/20250908/29beeddf1e45571d2c5a4187f2f1ae05.png')"></image> |
<scroll-view class="carousel-scroll" scroll-x="true" :show-scrollbar="false" :enhanced="true" |
||||
</view> |
:scroll-with-animation="true" :scroll-left="scrollLeft" @scroll="onScroll" @scrollend="onScrollEnd"> |
||||
|
<view class="carousel-content"> |
||||
<!-- 轮播内容 --> |
<view class="carousel-item" v-for="(item, index) in list" :key="index" @click="gotoDetail(item)" |
||||
<scroll-view |
v-if="item && item.image"> |
||||
class="carousel-scroll" |
<view class="issue-card"> |
||||
scroll-x="true" |
<!-- 背景图片 --> |
||||
:show-scrollbar="false" |
<image class="card-bg" :src="showImg(item.image)" mode="aspectFill"></image> |
||||
:enhanced="true" |
<view class="title-info"> |
||||
:scroll-with-animation="true" |
<view class="title-item"> |
||||
:scroll-left="scrollLeft" |
{{item.title}} |
||||
@scroll="onScroll" |
</view> |
||||
@scrollend="onScrollEnd" |
<view class="title-des"> |
||||
> |
{{item.des}} |
||||
<view class="carousel-content"> |
</view> |
||||
<view |
</view> |
||||
class="carousel-item" |
</view> |
||||
v-for="(item, index) in list" |
</view> |
||||
:key="index" |
|
||||
@click="gotoDetail" |
<!-- 无数据时的提示 --> |
||||
v-if="item && item.image" |
<view v-if="!list || list.length === 0" class="no-data"> |
||||
> |
<text>暂无数据</text> |
||||
<view class="issue-card"> |
</view> |
||||
<!-- 背景图片 --> |
|
||||
<image |
|
||||
class="card-bg" |
|
||||
:src="showImg(item.image)" |
|
||||
mode="aspectFill" |
|
||||
></image> |
|
||||
<view class="title-info"> |
|
||||
<view class="title-item"> |
|
||||
{{item.title}} |
|
||||
</view> |
|
||||
<view class="title-des"> |
|
||||
{{item.des}} |
|
||||
</view> |
</view> |
||||
</view> |
</scroll-view> |
||||
</view> |
|
||||
</view> |
<!-- 右箭头 --> |
||||
|
<view class="nav-arrow right-arrow" @click="nextSlide" |
||||
<!-- 无数据时的提示 --> |
v-if="list.length > 1 && currentIndex < list.length - 1"> |
||||
<view v-if="!list || list.length === 0" class="no-data"> |
|
||||
<text>暂无数据</text> |
<image style="width: 50rpx;height: 50rpx;" |
||||
</view> |
:src="showImg('/uploads/20250908/6622b3699518d6b559e1241d7addb7af.png')"></image> |
||||
</view> |
</view> |
||||
</scroll-view> |
</view> |
||||
|
</view> |
||||
<!-- 右箭头 --> |
|
||||
<view |
|
||||
class="nav-arrow right-arrow" |
|
||||
@click="nextSlide" |
|
||||
v-if="list.length > 1 && currentIndex < list.length - 1" |
|
||||
> |
|
||||
|
|
||||
<image style="width: 50rpx;height: 50rpx;" :src="showImg('/uploads/20250908/6622b3699518d6b559e1241d7addb7af.png')"></image> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
list: [{ |
list: [{ |
||||
image:'/uploads/20250908/bb069c36e88de7cde4e8dd24ac3b33b5.png', |
image: '/uploads/20250908/bb069c36e88de7cde4e8dd24ac3b33b5.png', |
||||
title:'太湖NAINO', |
title: '太湖NAINO', |
||||
des:'NAINO的异次元发现', |
des: 'NAINO的异次元发现', |
||||
}, |
}, |
||||
{ |
{ |
||||
image:'/uploads/20250908/ab1ffc93875de79fc87ee2c5e70cad3f.png', |
image: '/uploads/20250908/ab1ffc93875de79fc87ee2c5e70cad3f.png', |
||||
title:'SUNRISE日出东方', |
title: 'SUNRISE日出东方', |
||||
des:'扬州瓜洲古渡', |
des: '扬州瓜洲古渡', |
||||
}, |
}, |
||||
{ |
{ |
||||
image:'/uploads/20250908/4d38fcd2e403a13b85a96188de12a2a8.png', |
image: '/uploads/20250908/4d38fcd2e403a13b85a96188de12a2a8.png', |
||||
title:'中国昆曲博物馆', |
title: '中国昆曲博物馆', |
||||
des:'姹紫婿红里', |
des: '姹紫婿红里', |
||||
}, |
}, |
||||
{ |
{ |
||||
image:'/uploads/20250908/d4115d6c907f8b3ed5d30a11f9912460.png', |
image: '/uploads/20250908/d4115d6c907f8b3ed5d30a11f9912460.png', |
||||
title:'退思园', |
title: '退思园', |
||||
des:'苏州古典园林生活', |
des: '苏州古典园林生活', |
||||
}], |
mini: { |
||||
currentIndex: 0, |
appID: 'wxf3af8e268906fd6d', |
||||
scrollLeft: 0, |
path: 'pages/index/index' |
||||
itemWidth: 224, // 207rpx + 30rpx margin |
} |
||||
JDSU_IMG_URL: "https://epic.js-dyyj.com", |
} |
||||
}; |
], |
||||
}, |
currentIndex: 0, |
||||
mounted() { |
scrollLeft: 0, |
||||
// this.getList(); |
itemWidth: 224, // 207rpx + 30rpx margin |
||||
}, |
}; |
||||
methods: { |
}, |
||||
handleMoreClick(){ |
mounted() { |
||||
uni.switchTab({ |
// this.getList(); |
||||
url:'/pages/index/readingBody' |
}, |
||||
}) |
methods: { |
||||
}, |
handleMoreClick() { |
||||
gotoDetail(){ |
uni.switchTab({ |
||||
uni.showToast({ |
url: '/pages/index/readingBody' |
||||
title:'功能暂未开放', |
}) |
||||
icon:'none' |
}, |
||||
}) |
gotoDetail(item) { |
||||
}, |
if(item.mini){ |
||||
getList() { |
wx.navigateToMiniProgram({ |
||||
// this.Post( |
appId: item.mini.appID, |
||||
// { |
path: item.mini.path, |
||||
// type_id: 3, |
envVersion: 'release', |
||||
// offset: 0, |
success(res) { |
||||
// limit: 10, // 增加获取数量，确保有足够数据 |
// 打开成功 |
||||
// }, |
}, |
||||
// "/api/article/getArticleByType" |
fail(e){ |
||||
// ).then((res) => { |
console.log(e) |
||||
// if (res.data && res.data.length > 0) { |
} |
||||
// this.list = res.data; |
}) |
||||
// // 重置索引，确保从第一项开始 |
}else{ |
||||
// this.currentIndex = 0; |
uni.showToast({ |
||||
// this.scrollLeft = 0; |
title: '功能暂未开放', |
||||
// } |
icon: 'none' |
||||
// }); |
}) |
||||
}, |
} |
||||
|
|
||||
// 图片显示方法 |
}, |
||||
showImg(img) { |
getList() { |
||||
if (!img) return ""; |
// this.Post( |
||||
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
// { |
||||
return img; |
// type_id: 3, |
||||
} else { |
// offset: 0, |
||||
return this.JDSU_IMG_URL + img; |
// limit: 10, // 增加获取数量，确保有足够数据 |
||||
} |
// }, |
||||
}, |
// "/api/article/getArticleByType" |
||||
|
// ).then((res) => { |
||||
// 上一张 |
// if (res.data && res.data.length > 0) { |
||||
prevSlide() { |
// this.list = res.data; |
||||
if (!this.validateData()) return; |
// // 重置索引，确保从第一项开始 |
||||
|
// this.currentIndex = 0; |
||||
if (this.list.length > 1) { |
// this.scrollLeft = 0; |
||||
this.currentIndex = |
// } |
||||
this.currentIndex > 0 ? this.currentIndex - 1 : this.list.length - 1; |
// }); |
||||
this.$nextTick(() => { |
}, |
||||
this.scrollToCurrentItem(); |
|
||||
}); |
// 上一张 |
||||
} |
prevSlide() { |
||||
}, |
if (!this.validateData()) return; |
||||
|
|
||||
// 下一张 |
if (this.list.length > 1) { |
||||
nextSlide() { |
this.currentIndex = |
||||
if (!this.validateData()) return; |
this.currentIndex > 0 ? this.currentIndex - 1 : this.list.length - 1; |
||||
|
this.$nextTick(() => { |
||||
if (this.list.length > 1) { |
this.scrollToCurrentItem(); |
||||
this.currentIndex = |
}); |
||||
this.currentIndex < this.list.length - 1 ? this.currentIndex + 1 : 0; |
} |
||||
this.$nextTick(() => { |
}, |
||||
this.scrollToCurrentItem(); |
|
||||
}); |
// 下一张 |
||||
} |
nextSlide() { |
||||
}, |
if (!this.validateData()) return; |
||||
|
|
||||
// 滚动到当前项目 |
if (this.list.length > 1) { |
||||
scrollToCurrentItem() { |
this.currentIndex = |
||||
// 确保索引在有效范围内 |
this.currentIndex < this.list.length - 1 ? this.currentIndex + 1 : 0; |
||||
if (this.currentIndex < 0) { |
this.$nextTick(() => { |
||||
this.currentIndex = 0; |
this.scrollToCurrentItem(); |
||||
} |
}); |
||||
if (this.currentIndex >= this.list.length) { |
} |
||||
this.currentIndex = this.list.length - 1; |
}, |
||||
} |
|
||||
|
// 滚动到当前项目 |
||||
const scrollPosition = this.currentIndex * this.itemWidth; |
scrollToCurrentItem() { |
||||
this.scrollLeft = scrollPosition; |
// 确保索引在有效范围内 |
||||
}, |
if (this.currentIndex < 0) { |
||||
|
this.currentIndex = 0; |
||||
// 滚动事件 |
} |
||||
onScroll(e) { |
if (this.currentIndex >= this.list.length) { |
||||
const scrollLeft = e.detail.scrollLeft; |
this.currentIndex = this.list.length - 1; |
||||
const index = Math.round(scrollLeft / this.itemWidth); |
} |
||||
if ( |
|
||||
index !== this.currentIndex && |
const scrollPosition = this.currentIndex * this.itemWidth; |
||||
index >= 0 && |
this.scrollLeft = scrollPosition; |
||||
index < this.list.length |
}, |
||||
) { |
|
||||
this.currentIndex = index; |
// 滚动事件 |
||||
} |
onScroll(e) { |
||||
}, |
const scrollLeft = e.detail.scrollLeft; |
||||
|
const index = Math.round(scrollLeft / this.itemWidth); |
||||
// 滚动结束事件 |
if ( |
||||
onScrollEnd(e) { |
index !== this.currentIndex && |
||||
const scrollLeft = e.detail.scrollLeft; |
index >= 0 && |
||||
const index = Math.round(scrollLeft / this.itemWidth); |
index < this.list.length |
||||
// 确保索引在有效范围内 |
) { |
||||
this.currentIndex = Math.max(0, Math.min(index, this.list.length - 1)); |
this.currentIndex = index; |
||||
this.$nextTick(() => { |
} |
||||
this.scrollToCurrentItem(); |
}, |
||||
}); |
|
||||
}, |
// 滚动结束事件 |
||||
|
onScrollEnd(e) { |
||||
// 点击卡片 |
const scrollLeft = e.detail.scrollLeft; |
||||
handleItemClick(item) { |
const index = Math.round(scrollLeft / this.itemWidth); |
||||
console.log("点击了卡片:", item); |
// 确保索引在有效范围内 |
||||
// 这里可以添加跳转逻辑 |
this.currentIndex = Math.max(0, Math.min(index, this.list.length - 1)); |
||||
}, |
this.$nextTick(() => { |
||||
|
this.scrollToCurrentItem(); |
||||
// 验证数据有效性 |
}); |
||||
validateData() { |
}, |
||||
if (!this.list || this.list.length === 0) { |
|
||||
this.currentIndex = 0; |
// 点击卡片 |
||||
this.scrollLeft = 0; |
handleItemClick(item) { |
||||
return false; |
console.log("点击了卡片:", item); |
||||
} |
// 这里可以添加跳转逻辑 |
||||
|
}, |
||||
// 确保当前索引在有效范围内 |
|
||||
if (this.currentIndex < 0) { |
// 验证数据有效性 |
||||
this.currentIndex = 0; |
validateData() { |
||||
} |
if (!this.list || this.list.length === 0) { |
||||
if (this.currentIndex >= this.list.length) { |
this.currentIndex = 0; |
||||
this.currentIndex = this.list.length - 1; |
this.scrollLeft = 0; |
||||
} |
return false; |
||||
|
} |
||||
return true; |
|
||||
}, |
// 确保当前索引在有效范围内 |
||||
}, |
if (this.currentIndex < 0) { |
||||
}; |
this.currentIndex = 0; |
||||
|
} |
||||
|
if (this.currentIndex >= this.list.length) { |
||||
|
this.currentIndex = this.list.length - 1; |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.product-section { |
.product-section { |
||||
width: 100%; |
width: 100%; |
||||
background-color: #fffdd6; |
background-color: #fffdd6; |
||||
padding: 40rpx 25rpx; |
padding: 40rpx 25rpx; |
||||
margin: 30rpx 0; |
margin: 30rpx 0; |
||||
border-radius: 40rpx; |
border-radius: 40rpx; |
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
||||
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
||||
} |
|
||||
|
|
||||
// 轮播容器 |
|
||||
.carousel-container { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 191rpx ; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
// 轮播滚动视图 |
|
||||
.carousel-scroll { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
|
|
||||
// 轮播内容 |
|
||||
.carousel-content { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
height: 100%; |
|
||||
min-width: max-content; |
|
||||
} |
|
||||
|
|
||||
// 轮播项 |
|
||||
.carousel-item { |
|
||||
flex-shrink: 0; |
|
||||
width: 154rpx; |
|
||||
height: 191rpx; |
|
||||
margin: 0 7rpx; |
|
||||
will-change: transform; |
|
||||
} |
|
||||
|
|
||||
// 卡片样式 |
|
||||
.issue-card { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
// 背景图片 |
|
||||
.card-bg { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
// 导航箭头 |
|
||||
.nav-arrow { |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
transform: translateY(-50%); |
|
||||
width: 60rpx; |
|
||||
height: 60rpx; |
|
||||
border-radius: 50%; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
cursor: pointer; |
|
||||
z-index: 3; |
|
||||
transition: all 0.3s ease; |
|
||||
|
|
||||
&.left-arrow { |
|
||||
left: 0rpx; |
|
||||
} |
|
||||
|
|
||||
&.right-arrow { |
|
||||
right: 0rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.arrow-icon { |
|
||||
font-size: 32rpx; |
|
||||
color: #ffffff; |
|
||||
font-weight: bold; |
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); |
|
||||
} |
|
||||
|
|
||||
// 无数据提示 |
|
||||
.no-data { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 100%; |
|
||||
height: 368rpx; |
|
||||
color: #999; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
// 标题区域 |
|
||||
.title-section { |
|
||||
display: inline-block; |
|
||||
padding: 0rpx 0 30rpx; |
|
||||
width: 100%; |
|
||||
.title { |
|
||||
font-size: 34rpx; |
|
||||
font-weight: bold; |
|
||||
color: #000000; |
|
||||
} |
|
||||
|
|
||||
.more-btn { |
|
||||
font-size: 26rpx; |
|
||||
color: #000000; |
|
||||
margin-left: 35rpx; |
|
||||
} |
|
||||
} |
|
||||
.title-info{ |
|
||||
position: absolute; |
|
||||
bottom: 10rpx; |
|
||||
right: 0; |
|
||||
width: 100%; |
|
||||
color: white; |
|
||||
padding: 0 5rpx; |
|
||||
.title-item{ |
|
||||
text-align: center; |
|
||||
font-size: 16rpx; |
|
||||
font-weight: bold; |
|
||||
overflow: hidden; |
|
||||
word-wrap: normal; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
} |
||||
.title-des{ |
|
||||
margin-top: 5rpx; |
// 轮播容器 |
||||
text-align: center; |
.carousel-container { |
||||
font-size: 14rpx; |
position: relative; |
||||
|
width: 100%; |
||||
|
height: 191rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
// 轮播滚动视图 |
||||
|
.carousel-scroll { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
// 轮播内容 |
||||
|
.carousel-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
min-width: max-content; |
||||
|
} |
||||
|
|
||||
|
// 轮播项 |
||||
|
.carousel-item { |
||||
|
flex-shrink: 0; |
||||
|
width: 154rpx; |
||||
|
height: 191rpx; |
||||
|
margin: 0 7rpx; |
||||
|
will-change: transform; |
||||
|
} |
||||
|
|
||||
|
// 卡片样式 |
||||
|
.issue-card { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
overflow: hidden; |
overflow: hidden; |
||||
word-wrap: normal; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
} |
||||
} |
|
||||
|
// 背景图片 |
||||
|
.card-bg { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
// 导航箭头 |
||||
|
.nav-arrow { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
z-index: 3; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&.left-arrow { |
||||
|
left: 0rpx; |
||||
|
} |
||||
|
|
||||
|
&.right-arrow { |
||||
|
right: 0rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.arrow-icon { |
||||
|
font-size: 32rpx; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); |
||||
|
} |
||||
|
|
||||
|
// 无数据提示 |
||||
|
.no-data { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height: 368rpx; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
// 标题区域 |
||||
|
.title-section { |
||||
|
display: inline-block; |
||||
|
padding: 0rpx 0 30rpx; |
||||
|
width: 100%; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.more-btn { |
||||
|
font-size: 26rpx; |
||||
|
color: #000000; |
||||
|
margin-left: 35rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title-info { |
||||
|
position: absolute; |
||||
|
bottom: 10rpx; |
||||
|
right: 0; |
||||
|
width: 100%; |
||||
|
color: white; |
||||
|
padding: 0 5rpx; |
||||
|
|
||||
|
.title-item { |
||||
|
text-align: center; |
||||
|
font-size: 16rpx; |
||||
|
font-weight: bold; |
||||
|
overflow: hidden; |
||||
|
word-wrap: normal; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.title-des { |
||||
|
margin-top: 5rpx; |
||||
|
text-align: center; |
||||
|
font-size: 14rpx; |
||||
|
overflow: hidden; |
||||
|
word-wrap: normal; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue