来源：https://github.com/l-x-f/uni-full-page

 

components/FullPage/index.vue

<template>
  <view class="full-page-container">
    <view
      class="full-page-main"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="style"
    >
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  name: 'FullPage',
  props: {
    // 触发翻页的临界值
    critical: {
      type: Number,
      default: 50
    },
    // 总共页面数
    totalPage: {
      type: Number,
      required: true,
      default: 0
    },
    // 当前页面的索引值
    activeIndex: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      pageIndex: 0, // 当前页面的索引值
      startPageY: 0, // 开始的位置
      endPageY: 0, // 结束的位置
      marginTop: 0 // 滑动下拉(上拉)距离
    }
  },
  mounted() {
    this.pageIndex = this.activeIndex
  },
  computed: {
    style() {
      return `transform:translateY(-${this.pageIndex * 100}%);margin-top:${
        this.marginTop
      }px`
    }
  },
  watch: {
    activeIndex(value) {
      this.pageIndex = value
    }
  },
  methods: {
    // 开始滑动
    handleTouchStart(e) {
      const { pageY } = e.touches[0]
      this.startPageY = pageY
    },
    // 滑动中
    handleTouchMove(e) {
      const { pageY } = e.touches[0]
      if (
        pageY - this.startPageY < this.critical &&
        pageY - this.startPageY > -this.critical
      ) {
        this.marginTop = pageY - this.startPageY
      }
      this.endPageY = pageY
    },
    // 滑动结束
    handleTouchEnd() {
      if (!this.endPageY) {
        return
      }
      if (
        this.endPageY - this.startPageY > this.critical &&
        this.pageIndex > 0
      ) {
        this.pageIndex -= 1
      } else if (
        this.endPageY - this.startPageY < -this.critical &&
        this.pageIndex < this.totalPage - 1
      ) {
        this.pageIndex += 1
      }
      this.$emit('update:activeIndex', this.pageIndex)
      this.startPageY = 0
      this.endPageY = 0
      this.marginTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.full-page-container {
  height: 100%;
  overflow: hidden;
  .full-page-main {
    height: 100%;
    transition: all 0.3s;
  }
}
</style>

 

pages/index/index

<template>
  <full-page :active-index.sync="activeIndex" :total-page="totalPage">
    <view
      class="section"
      v-for="(item, index) in totalPage"
      :key="index"
      :style="getRandomStyle()"
    >
      <div :class="'page page-' + index">
        {{ index + 1 }}
        <button type="primary" @click="toPage(1)">
          跳转到第1页
        </button>
        <button type="primary" @click="toPage(10)">
          跳转到第10页
        </button>
      </div>
    </view>
  </full-page>
</template>

<script>
import FullPage from '@/components/FullPage'
export default {
  components: {
    FullPage,
  },
  data() {
    return {
      totalPage: 10,
      activeIndex: 0,
    }
  },
  methods: {
    getRandomStyle() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      const color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
      return `background-color:${color}`
    },
    toPage(index) {
      this.activeIndex = index - 1
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  height: 100%;
}
.section {
  height: 100%;
  width: 100%;
  position: relative;
}
.page {
  height: 100%;
  width: 100%;
  text-align: center;
  font-size: 50rpx;
  padding-top: 150rpx;
  box-sizing: border-box;
}
button {
  font-size: 30rpx;
  width: 400rpx;
  margin: 50rpx;
}
</style>

 

来源里主要针对手机端，如果想在电脑端用滚轮滑动，只需要在pages/index/index里添加滚轮事件

this.handleScroll

改变activeIndex的值就好了

 mounted() {
    // chrome and ie
    window.addEventListener('mousewheel', this.handleScroll, false)
    // firefox
    window.addEventListener("DOMMouseScroll", this.handleScroll, false)
 }，