scroll

scroll.vue

<template lang="html">
  <div id="demo">
    <div
      class="drag-area"
      @touchstart="dragstart"
      @touchmove.stop.prevent="drag"
      @touchend="dragend">
      <ul
        :class="['list', {animation}]"
        :style="style">
        <li
          v-for="(item, index) in items"
          :class="['list-item', {active: index === active}]"
          :style="{width: `${width}px`}">{{item}}</li>
    </ul>
    </div>
    <h3>{{active}}</h3>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 5,
      total: 1000,
      pageNum: 20,
      active: 0,
      offset: 0,
      start: 0,
      animation: false
    }
  },
  computed: {
    items () {
      const { total } = this
      const tmp = []
      for (let i = 0; i < total; i++) {
        tmp.push(i)
      }
      return tmp
    },
    width () {
      return document.body.clientWidth / this.num
    },
    style () {
      return {
        transform: 'translate3d(' + this.offset + 'px, 0, 0)',
        width: this.width * this.items.length + 'px'
      }
    },
    maxOffset () {
      return (this.items.length - this.num) * this.width
    }
  },
  methods: {
    dragstart (e) {
      this.animation = false
      this.startX = e.touches[0].pageX
      this.lastX = this.startX
      this.startOffset = this.offset
      this.startTime = Date.now()
    },

    drag (e) {
      this.endX = e.touches[0].pageX
      const offset = this.endX - this.lastX
      this.lastX = this.endX
      this.offset = this.offset + offset
      this.dragging = true
    },

    dragend (e) {
      if (this.dragging) {
        const endTime = Date.now()
        const time = endTime - this.startTime
        const offset = this.endX - this.startX
        const speed = Math.abs(offset) / time
        if (speed > 1.5) {
          this.offset = this.startOffset + speed * offset
        }
        this.dragging = false
        if (this.offset > 0) {
          this.offset = 0
        }
        if (this.offset < -this.maxOffset) {
          this.offset = -this.maxOffset
        }
        this.active = Math.round(-this.offset / this.width + (this.num - 1) / 2)
        // if (active > this.activeItems.length - 1) {
        //   active = this.activeItems.length - 1
        // } else if (active < 0) {
        //   active = 0
        // }
        // this.active = active
        this.updateOffset()
        this.animation = true
      }
    },
    updateOffset () {
      this.offset = -this.width * (this.active - (this.num - 1) < 0 ? 0 : this.active - (this.num - 1) / 2)
    }
  },
  created () {
    this.updateOffset()
  }
}
</script>

<style lang="css">
.animation {
  transition: all 0.3s ease;
}
.drag-area {
  box-sizing: border-box;
  overflow: hidden;
  border: dpr(2px) solid #333;
  height: dpr(400px);
  padding: dpr(100px) 0;
}

.list {
  padding: 0;
}

.list-item {
  display: inline-block;
  list-style: none;
  height: dpr(200px);
  border: dpr(2px) solid #ccc;
  border-radius: dpr(8px);
  box-sizing: border-box;
  transition: all 0.3s ease;
  text-align: center;
  line-height: dpr(200px);
  user-select: none;
  cursor: pointer;
}
.list-item.active {
  background-color: #38adff;
  color: #fff;
  border-color: #38adff;
}
</style>