uni-app実装fullpageコンポーネント(マイクロメッセージウィジェット、h 5などに適用)

uni-app実装fullpageコンポーネント(マイクロメッセージウィジェット、h 5などに適用)
ビジネスニーズ.
本文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