178 lines
3.6 KiB
Vue
178 lines
3.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 轮播图区域 -->
|
||
<swiper class="swiper" :current="currentIndex" @change="onSwiperChange" :previous-margin="previewMargin + 'px'"
|
||
:next-margin="previewMargin + 'px'" :circular="true" :autoplay="false">
|
||
<swiper-item v-for="(item, index) in list" :key="index" style="align-content: center;">
|
||
<view class="swiper-item" :class="{ active: currentIndex === index }" @click="handleClick(index)">
|
||
<image class="image" :src="item.image" />
|
||
<!-- <text class="title">{{ item.title }}</text> -->
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 指示器 -->
|
||
<!-- <view class="indicators">
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
class="dot"
|
||
:class="{ active: currentIndex === index }"
|
||
@click="switchTo(index)"
|
||
></view>
|
||
</view> -->
|
||
|
||
<!-- 控制按钮 -->
|
||
<!-- <view class="controls">
|
||
<button class="btn" @click="switchTo(currentIndex - 1)">上一张</button>
|
||
<button class="btn" @click="switchTo(2)">跳转到第3张</button>
|
||
<button class="btn" @click="switchTo(currentIndex + 1)">下一张</button>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import xinR from '@/static/image/grade/cf-xinren.png';
|
||
import fuH from '@/static/image/grade/cf-fuhao.png';
|
||
import xingJ from '@/static/image/grade/cf-xingjue.png';
|
||
import xingH from '@/static/image/grade/cf-xinghou.png';
|
||
import xingW from '@/static/image/grade/cf-xingwang.png';
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentIndex: 0,
|
||
previewMargin: 30, // 左右露出的边距（单位px）
|
||
list: [{
|
||
id: 1,
|
||
title: '图片1',
|
||
image: xinR
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '图片2',
|
||
image: fuH
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '图片3',
|
||
image: xingJ
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '图片4',
|
||
image: xingH
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '图片5',
|
||
image: xingW
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
// 切换轮播图
|
||
switchTo(index) {
|
||
if (index < 0) index = this.list.length - 1;
|
||
if (index >= this.list.length) index = 0;
|
||
this.currentIndex = index;
|
||
},
|
||
|
||
// 轮播图切换事件
|
||
onSwiperChange(e) {
|
||
this.currentIndex = e.detail.current;
|
||
},
|
||
|
||
// 点击轮播项
|
||
handleClick(index) {
|
||
console.log('点击了第', index + 1, '张');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.swiper {
|
||
height: 300rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.swiper-item {
|
||
height: 266rpx;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.swiper-item.active {
|
||
height: 266rpx;
|
||
border-radius: 30rpx;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
img {
|
||
border-radius: 30rpx !important;
|
||
}
|
||
|
||
.image {
|
||
flex: 1;
|
||
width: 92%;
|
||
height: 90%;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.title {
|
||
padding: 8px;
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
color: white;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.indicators {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: #007AFF;
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 6px 12px;
|
||
font-size: 14px;
|
||
background-color: #007AFF;
|
||
color: white;
|
||
border-radius: 4px;
|
||
}
|
||
</style> |