290 lines
6.8 KiB
Vue
290 lines
6.8 KiB
Vue
<template>
|
|
<view class="test-page">
|
|
<view class="page-header">
|
|
<text class="title">纵向轮播测试</text>
|
|
<text class="subtitle">验证循环动画连续性</text>
|
|
</view>
|
|
|
|
<!-- 3个项目的轮播测试 -->
|
|
<view class="test-section">
|
|
<text class="section-title">3项轮播测试 (重点测试循环)</text>
|
|
<simple-vertical-swiper
|
|
:items="threeItems"
|
|
type="text"
|
|
:height="60"
|
|
:autoplay="true"
|
|
:interval="2000"
|
|
:show-indicators="true"
|
|
@change="onThreeItemsChange"
|
|
/>
|
|
<text class="tip">观察从第3项到第1项的动画是否平滑</text>
|
|
</view>
|
|
|
|
<!-- 4个项目的轮播测试 -->
|
|
<view class="test-section">
|
|
<text class="section-title">4项轮播测试</text>
|
|
<simple-vertical-swiper
|
|
:items="fourItems"
|
|
type="notice"
|
|
:height="50"
|
|
:autoplay="true"
|
|
:interval="1800"
|
|
:show-indicators="true"
|
|
@change="onFourItemsChange"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 5个项目的轮播测试 -->
|
|
<view class="test-section">
|
|
<text class="section-title">5项轮播测试</text>
|
|
<simple-vertical-swiper
|
|
:items="fiveItems"
|
|
type="content"
|
|
:height="80"
|
|
:autoplay="true"
|
|
:interval="2200"
|
|
:show-indicators="true"
|
|
@change="onFiveItemsChange"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 手动控制按钮 -->
|
|
<view class="control-section">
|
|
<text class="section-title">手动控制测试</text>
|
|
<simple-vertical-swiper
|
|
ref="manualSwiper"
|
|
:items="threeItems"
|
|
type="text"
|
|
:height="60"
|
|
:autoplay="false"
|
|
:show-indicators="true"
|
|
@change="onManualChange"
|
|
/>
|
|
<view class="control-buttons">
|
|
<button @click="prevSlide" class="control-btn">上一页</button>
|
|
<button @click="nextSlide" class="control-btn">下一页</button>
|
|
<button @click="goToFirst" class="control-btn">第1页</button>
|
|
<button @click="goToLast" class="control-btn">最后页</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 当前状态显示 -->
|
|
<view class="status-section">
|
|
<text class="section-title">状态信息</text>
|
|
<text class="status-text">3项轮播当前索引: {{ currentIndex.three }}</text>
|
|
<text class="status-text">4项轮播当前索引: {{ currentIndex.four }}</text>
|
|
<text class="status-text">5项轮播当前索引: {{ currentIndex.five }}</text>
|
|
<text class="status-text"
|
|
>手动轮播当前索引: {{ currentIndex.manual }}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SimpleVerticalSwiper from '@/components/simple-vertical-swiper.vue'
|
|
|
|
export default {
|
|
name: 'TestSwiper',
|
|
components: {
|
|
SimpleVerticalSwiper,
|
|
},
|
|
data() {
|
|
return {
|
|
// 3项测试数据 - 重点测试循环
|
|
threeItems: [
|
|
'🎯 第1项 - 测试到第3项',
|
|
'🎨 第2项 - 中间项目',
|
|
'🎪 第3项 - 测试到第1项',
|
|
],
|
|
// 4项测试数据
|
|
fourItems: [
|
|
{ content: '🌟 公告1 - 欢迎使用轮播组件' },
|
|
{ content: '🎁 公告2 - 新功能上线啦' },
|
|
{ content: '🚀 公告3 - 性能全面优化' },
|
|
{ content: '💫 公告4 - 修复循环动画' },
|
|
],
|
|
// 5项测试数据
|
|
fiveItems: [
|
|
{ title: '第1项', description: '循环动画测试项目' },
|
|
{ title: '第2项', description: '正常切换动画' },
|
|
{ title: '第3项', description: '中间项目测试' },
|
|
{ title: '第4项', description: '倒数第二项' },
|
|
{ title: '第5项', description: '最后一项到第一项' },
|
|
],
|
|
// 当前索引记录
|
|
currentIndex: {
|
|
three: 0,
|
|
four: 0,
|
|
five: 0,
|
|
manual: 0,
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log('轮播测试页面加载')
|
|
},
|
|
methods: {
|
|
// 3项轮播变化
|
|
onThreeItemsChange(e) {
|
|
console.log('3项轮播变化:', e)
|
|
this.currentIndex.three = e.current
|
|
},
|
|
|
|
// 4项轮播变化
|
|
onFourItemsChange(e) {
|
|
console.log('4项轮播变化:', e)
|
|
this.currentIndex.four = e.current
|
|
},
|
|
|
|
// 5项轮播变化
|
|
onFiveItemsChange(e) {
|
|
console.log('5项轮播变化:', e)
|
|
this.currentIndex.five = e.current
|
|
},
|
|
|
|
// 手动轮播变化
|
|
onManualChange(e) {
|
|
console.log('手动轮播变化:', e)
|
|
this.currentIndex.manual = e.current
|
|
},
|
|
|
|
// 手动控制方法
|
|
prevSlide() {
|
|
if (this.$refs.manualSwiper) {
|
|
this.$refs.manualSwiper.prev()
|
|
}
|
|
},
|
|
|
|
nextSlide() {
|
|
if (this.$refs.manualSwiper) {
|
|
this.$refs.manualSwiper.next()
|
|
}
|
|
},
|
|
|
|
goToFirst() {
|
|
if (this.$refs.manualSwiper) {
|
|
this.$refs.manualSwiper.goToSlide(0)
|
|
}
|
|
},
|
|
|
|
goToLast() {
|
|
if (this.$refs.manualSwiper) {
|
|
this.$refs.manualSwiper.goToSlide(this.threeItems.length - 1)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.test-page {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
|
|
.title {
|
|
display: block;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.subtitle {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
}
|
|
}
|
|
|
|
.test-section {
|
|
margin-bottom: 25px;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #34495e;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.tip {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #e74c3c;
|
|
margin-top: 10px;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.control-section {
|
|
margin-bottom: 25px;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #34495e;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.control-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 15px;
|
|
gap: 10px;
|
|
|
|
.control-btn {
|
|
flex: 1;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-section {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #34495e;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.status-text {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #555;
|
|
margin-bottom: 8px;
|
|
padding: 8px 12px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #667eea;
|
|
}
|
|
}
|
|
</style>
|