<template>
<view>
<!-- 显示当前页码 -->
<view class="page-indicator">第 {{ currentPage + 1 }} 页</view>
<!-- 垂直方向滑动 -->
<swiper :current="currentPage" @change="onSwiperChange" vertical :style="{ height: '100vh' }">
<swiper-item v-for="(page, index) in pages" :key="index">
<view class="page-item" :style="{ backgroundColor: page.color }">
<text>第 {{ index + 1 }} 页</text>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pages: [
{ color: '#ffe6e6' },
{ color: '#e6f3ff' },
{ color: '#e6ffe6' },
]
};
},
methods: {
onSwiperChange(e) {
this.currentPage = e.detail.current;
if(this.currentPage==2){
setTimeout(() => {
uni.redirectTo({
url: '/pages/index/music' // 替换为当前页面的路径
});
}, 1000)
}
if(this.currentPage==0){
setTimeout(() => {
uni.redirectTo({
url: '/pages/index/music' // 替换为当前页面的路径
});
}, 1000)
}
}
}
};
</script>
<style>
.page-indicator {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
}
.page-item {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 24px;
}
</style>