Vue で Vant を使用してモバイル ウィザードの紹介ページ効果を実装する

<template>
  <div class="guide-container">
    <van-swipe ref="swipe" :autoplay="3000" loop="false">
      <van-swipe-item v-for="(item, index) in guideList" :key="index">
        <div class="guide-item">
          <img :src="item.imgUrl" />
          <p :class="item.titleClass">{{ item.title }}</p>
          <p :class="item.textClass">{{ item.text }}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
    <van-button type="primary" size="large" @click="goToNext" v-if="current < guideList.length - 1">下一步</van-button>
    <van-button type="primary" size="large" @click="finishGuide" v-else>完成</van-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        guideList: [{
            imgUrl: 'image/guide1.jpg',
            title: '欢迎使用Vant Mobile 示例',
            titleClass: 'guide-title',
            text: 'Vant 是有赞前端团队开发的移动端组件库，提供了丰富的基础组件和业务组件，基于 Vue 开发。',
            textClass: 'guide-text'
          },
          {
            imgUrl: 'image/guide2.jpg',
            title: '丰富的基础组件',
            titleClass: 'guide-title',
            text: 'Vant 涵盖了移动端应用开发中常用的各种基础组件，如按钮、导航栏、表单等。',
            textClass: 'guide-text'
          },
          {
            imgUrl: 'image/guide3.jpg',
            title: '大量业务场景',
            titleClass: 'guide-title',
            text: 'Vant 还提供了大量的业务组件，如商品卡片、地址选择器等，可帮助您更快速地构建移动端应用。',
            textClass: 'guide-text'
          }
        ],
        current: 0
      }
    },
    methods: {
      goToNext() {
        this.current++
        this.$refs.swipe.swipeTo(this.current)
      },
      finishGuide() {
        this.$router.replace('/home')
      }
    }
  }
</script>

<style scoped>
  .guide-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .guide-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .guide-title {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .guide-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
  }
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Guide from '@/components/Guide'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Guide',
      component: Guide
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})