pc端 左右滑动切换页面

如果你希望在PC端也能实现左右滑动切换页面的效果，可以使用vue-touch和vue-scrollbar这两个插件结合实现。首先你需要安装这两个插件：

npm install vue-touch vue-scrollbar --save

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

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

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--
      }
    }
  },
  components: {
    VueScrollbar
  }
}

在mounted和beforeDestroy钩子函数中注册和取消touch对象，然后实现swipeLeft和swipeRight方法来处理左右滑动事件，touchStart和touchEnd方法来处理手动滑动事件。这里还引入了vue-scrollbar插件，它可以实现滚动条的效果。在模板中，你可以使用v-for指令来循环渲染页面，然后使用v-if指令来控制显示当前页面，并在vue-scrollbar组件上绑定相应的事件：

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

这里的container是页面容器，page是每个页面，scrollbar是滚动条，你可以根据需要来设置样式。注意，在vue-scrollbar组件上绑定了scroll-end事件，用来判断滚动条是否结束滚动，如果是则更新当前页码。