现成的组件 直接用
<template>
<view style="margin: 10rpx;">
<view class="tea-header">
<text class="tea-title">礼尚往来</text>
<view class="tea-view-all">
<text>查看全部</text>
<text>></text>
</view>
</view>
<view style="display: flex;justify-content: center;align-content: center;">
<NavBar :navItems="myNavItems" :text_padding="12" :fontSize="30" :dynamicHeight="8" :indicatorWidth="64"
@item-selected="onItemSelected" />
</view>
<view class="content-wrapper" style="position: relative; overflow: hidden;">
<view v-for="(vla, i) in products" :key="i"
:class="['content-page', getPageClass(i)]">
<!-- 左边轮播图 -->
<view class="left-container">
<swiper class="swiper-container" indicator-dots="true" indicator-active-color="#ffffff"
indicator-color="#fff9" autoplay="true" interval="3000" circular="true">
<swiper-item v-for="(item, index) in vla.bannerImages" :key="index">
<image class="swiper-image" mode="aspectFill" :src="item.src" />
</swiper-item>
</swiper>
</view>
<!-- 右边商品网格 -->
<view class="right-container">
<view class="product-item" v-for="(item, index) in vla.list" :key="index">
<image class="product-image" :src="item.image" mode="aspectFill" />
<view style="display: flex;align-items: flex-start; flex-direction: column; ">
<text class="product-title" style="">{{ item.title }}</text>
<text class="product-price">{{ item.price }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import NavBar from './components/xztdemoNavBar.vue'
export default {
components: {
NavBar
},
data() {
return {
myNavItems: ['关怀领导', '探望长辈', '关爱女性', '男性健康', '关爱儿童',],
selectedIndex: 0,
products: [
{
bannerImages: [
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
},
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
},
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'
}
],
list: [{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '人参灵芝胶囊',
price: '¥798.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: 'KMax康麦斯',
price: '¥698.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '海参礼盒',
price: '¥1798.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '虫草',
price: '¥798.00'
},
]
},
{
bannerImages: [
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
},
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
},
{
src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'
}
],
list: [{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '人参灵芝胶囊1232123',
price: '¥798.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: 'KMax康麦斯3333',
price: '¥698.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '海参礼盒12132',
price: '¥1798.00'
},
{
image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
title: '虫草123',
price: '¥798.00'
},
]
},
]
}
},
methods: {
onItemSelected(index) {
this.selectedIndex = index;
},
getPageClass(index) {
if (index === this.selectedIndex) {
return 'active';
} else if (index < this.selectedIndex) {
return 'left';
} else {
return 'right';
}
}
}
}
</script>
<style>
.tea-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 20rpx;
}
.tea-title {
font-size: 32rpx;
font-weight: bold;
font-family: PingFang SC, PingFang SC;
}
.tea-view-all {
color: #6E6E6E;
font-size: 24rpx;
}
.content-wrapper {
height: 300px; /* 根据需要调整高度 */
}
.content-page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.3s ease;
opacity: 0;
transform: translateX(100%);
display: flex;
}
.content-page.active {
opacity: 1;
transform: translateX(0);
}
.content-page.left {
transform: translateX(-100%);
}
.content-page.right {
transform: translateX(100%);
}
.left-container {
flex: 1;
height: 100%;
margin-right: 10px;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-image {
width: 100%;
height: 100%;
border-radius: 10px;
transform: scaleX(-1);
object-fit: cover;
}
.right-container {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.product-item {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 10px;
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}
.product-image {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 5px;
}
.product-title {
font-size: 14px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 6em;
/* 估算一个宽度，大约5个字 */
}
.product-price {
font-size: 16px;
color: #FF6A22;
}
</style>
