uni-app 實現 fullpage 組件（適用於微信小程序,h5等）

uni-app 實現 fullpage 組件（適用於微信小程序,h5等）

業務需求。

本文github 源碼地址

1.組件 src/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>

2.使用 /src/pages/index/index.vue

<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>

3.實現效果

參考鏈接

1.https://github.com/rongj/wechatapp-fullpage-scroll