Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

<テンプレート>
  <div class="refresh" id="refresh">
    <スロット名="上傾斜"></スロット>
    <スロット></スロット>
    <スロット名="下傾斜"></スロット>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'PullupOrPulldownRefresh',
  小道具: {
    // 最大移動距離 maxMove: {
      タイプ: 数値、
      デフォルト: 300
    },
    // 減衰係数摩擦: {
      タイプ: 数値、
      デフォルト: 0.3
    }
  },
  データ（） {
    戻る {
      開始Y: 0,
      ul: ヌル、
      描画: null、
      上: null、
      ダウン: null、
      y: 0 // 慣性反発距離}
  },
  マウント() {
    this.$nextTick(() => {
      this.draw = document.getElementById('refresh')
      this.ul = this.draw.children[1]
      this.up = this.draw.children[0]
      this.down = this.draw.children[2]
      this.draw.addEventListener('touchstart', this.touchstart)
      this.draw.addEventListener('touchmove', this.touchmoveEvent)
      this.draw.addEventListener('touchend', this.touchendEvent)
    })
  },
  メソッド: {
    // タッチ開始イベント touchstart(event) {
      this.startY = イベント.changedTouches[0].clientY
    },
    // タッチ移動イベント touchmoveEvent(event) {
      定数高さ = this.ul.clientHeight - this.draw.clientHeight
      高さ === this.draw.scrollTop || this.draw.scrollTop === 0 の場合 {
        var a = event.changedTouches[0].clientY - this.startY
        this.y = a <= this.maxMove ? a : this.maxMove
        // ラグの問題を解消するには、トランジション効果をクリアする必要があります this.ul.style.transition = 'none'
        this.ul.style.transform = 'translateY(' + this.friction * this.y + 'px)'
        // ステータスを変更する const upHeight = -this.up.clientHeight + this.friction * this.y
        // 開始するには下に引っ張る if (this.friction * this.y > 0) (this.setStatus(this.friction * this.y), this.up.style.transition = 'none', this.up.style.transform = 'translateY(' + upHeight + 'px) translateX(-50%)')
        // 引き上げて開始します if (this.friction * this.y < 0) (this.setStatus(this.friction * this.y), this.down.style.transition = 'none', this.down.style.marginTop = this.friction * this.y + 'px')
      }
    },
    // タッチ終了イベント touchendEvent(event) {
      this.friction * this.y >= 50 の場合、 this.$emit('RefreshUp', this.friction * this.y)
      そうでない場合 (this.friction * this.y < -50) this.$emit('RefreshDown', this.friction * this.y)
      それ以外の場合は this.resetStyle()
    },
    // リセットしてトランジション効果を追加する resetStyle() {
      this.ul.style.transition = '.6s を変換'
      this.ul.style.transform = 'translateY(' + 0 + 'px)'
      this.up.style.transition = 'すべて .6'
      this.up.style.transform = 'translateY(-' + this.up.clientHeight + 'px) translateX(-50%)'
      this.down.style.transition = 'すべて .6'
      this.down.style.marginTop = -this.down.clientHeight + 'px'
    },
    // 更新ステータスを設定する setStatus(y) {
      this.$emit('setStatus', y)
    }
  }
}
</スクリプト>

<スタイル lang="scss">
.リフレッシュ{
  幅: 100%;
  高さ：100vh;
  境界線: 2px 実線 #ccc;
  位置: 相対的;
  オーバーフロー: 非表示;
  オーバーフロー:自動;
  位置: 固定;
  ul {
    ズーム: 1;
    パディング: 0 10%;
  }

  ul::after {
    コンテンツ： '';
    表示: ブロック;
    可視性: 非表示;
    高さ: 0;
    クリア: 両方;
  }

  li {
    リストスタイル: なし;
    幅: 100%;
    高さ: 50px;
    行の高さ: 50px;
    テキスト配置: 中央;
  }
  .UpRefresh{
    位置: 絶対;
    左: 50%;
    変換: translateX(-50%);
    Zインデックス: -9;
  }
  .ダウンリフレッシュ{
    位置: 相対的;
    左: 50%;
    変換: translateX(-50%);
    上マージン: -10px;
    Zインデックス: -9;
  }
}
</スタイル>

<テンプレート>
  <div>
    <プルアップまたはプルダウン更新
      ref="プルアップまたはプルダウン更新"
      :maxMove="最大移動"
      :friction="摩擦"
      @RefreshUp="リフレッシュアップ"
      @RefreshDown="リフレッシュダウン"
      @setStatus="ステータスを設定"
    >
      <テンプレート v-slot:upTilte>
        <!-- <div class="UpRefresh" v-show="isUpRefresh">{{ アップタイトル }}</div> -->
        <div class="UpRefresh" v-show="isUpRefresh">
          <img :src="require('@/assets/logo.png')" alt="" />
          <p>{{ アップタイトル }}</p>
        </div>
      </テンプレート>
      <ul>
        <li
          v-for="(item, index) データ内"
          :key="インデックス"
          スタイル="背景: オレンジ"
        >
          {{ アイテム }}
        </li>
      </ul>
      <テンプレート v-slot:downTilte>
        <div class="DownRefresh" v-show="isDownRefresh">{{ ダウンタイトル }}</div>
      </テンプレート>
    </プルアップまたはプルダウン更新>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      最大移動: 300,
      摩擦: 0.3、
      データ: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      isUpRefresh: false、
      isDownRefresh: false、
      下タイトル: 「さらに読み込むには上に引っ張ってください」
      アップタイトル: 「下に引っ張って更新」
    }
  },
  メソッド: {
    ステータスを設定する(y) {
      （y && y > 0）の場合{
        this.isUpRefresh = true
        this.Uptitle = '下に引いて更新'
        if (y >= 50) this.Uptitle = 'リリースして更新'
        戻る
      }
      this.isDownRefresh = true
      this.Downtitle = 'さらに読み込むには上に引っ張ってください'
      if (y <= -50) this.Downtitle = 'さらに読み込むには離してください'
    },
    リフレッシュアップ(y) {
      (!y) の場合、戻り
      （y >= 50）の場合{
        this.Uptitle = 'リフレッシュ'
        タイムアウトを設定する(() => {
          (var i = 1; i <= 10; i++) の場合 {
            this.data.push(this.data[this.data.length - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // リバウンドリセット}, 1000)
      }
    },
    リフレッシュダウン(y) {
      (!y) の場合、戻り
      （y <= -50）の場合{
        this.Downtitle = '読み込み中'
        タイムアウトを設定する(() => {
          (var i = 1; i <= 10; i++) の場合 {
            this.data.push(this.data[this.data.length - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // リバウンドリセット}, 1000)
      }
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.UpRefresh画像{
  幅: 30ピクセル;
}
</スタイル>