左右滑动切换页面

如果你希望在移动端实现左右滑动切换页面的效果，可以使用vue-touch这个插件来实现。首先你需要安装该插件：

npm install vue-touch --save

然后在组件中引入该插件，并注册一个touch对象：

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch)

export default {
  data() {
    return {
      current: 0, // 当前页码
      startX: 0, // 开始滑动的位置
      endX: 0, // 结束滑动的位置
      distance: 0, // 滑动的距离
      pages: [ // 页面列表
        { title: 'Page 1' },
        { title: 'Page 2' },
        { title: 'Page 3' },
        { title: 'Page 4' },
        { title: 'Page 5' }
      ]
    }
  },
  mounted() {
    this.$touch.on('swipeleft', this.swipeLeft)
    this.$touch.on('swiperight', this.swipeRight)
  },
  beforeDestroy() {
    this.$touch.off('swipeleft', this.swipeLeft)
    this.$touch.off('swiperight', this.swipeRight)
  },
  methods: {
    swipeLeft(e) {
      if (this.current < this.pages.length - 1) {
        this.current++
      }
    },
    swipeRight(e) {
      if (this.current > 0) {
        this.current--
      }
    },
    touchStart(e) {
      this.startX = e.changedTouches[0].pageX
    },
    touchEnd(e) {
      this.endX = e.changedTouches[0].pageX
      this.distance = this.endX - this.startX
      if (this.distance < -30 && this.current < this.pages.length - 1) {
        this.current++
      } else if (this.distance > 30 && this.current > 0) {
        this.current--
      }
    }
  }
}

在mounted和beforeDestroy钩子函数中注册和取消touch对象，然后实现swipeLeft和swipeRight方法来处理左右滑动事件，touchStart和touchEnd方法来处理手动滑动事件。在模板中，你可以使用v-for指令来循环渲染页面，然后使用v-if指令来控制显示当前页面：

<template>
  <div class="container" @touchstart="touchStart" @touchend="touchEnd">
    <div class="page" v-for="(page, index) in pages" :key="index" v-if="index === current">
      <h1>{{ page.title }}</h1>
    </div>
  </div>
</template>

这里的container是页面容器，page是每个页面，你可以根据需要来设置样式。