vue局部滚动组件

如果不想使用swiper，则可以使用原生CSS的方式

<template>
  <div class="test-scroller">
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
    <div>33333333</div>
    <div>4444444444</div>
    <div>66666666666</div>
    <div>65666666666</div>
  </div>
</template>

<script>
export default {
  name: 'TSP',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="less" scoped>
.test-scroller {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  background: red;
  color: #fff;
  height: 30rem;
  overflow: scroll;
}
</style>