基於和原生封裝的下拉重新整理上拉載入元件，供大家參考，具體內容如下

• upTilte插槽是下拉重新整理的自定義內容放的地方
• downTilte插槽是上拉載入的自定義內容放的地方
• 預設插槽為列表內容區域

元件程式碼如下

<template>
  <div class="refresh" id="refresh">
    <slot name="upTilte"></slot>
    <slot></slot>
    <slot name="downTiltehttp://www.cppcns.com
 
"></slot>
  </div>
</template>

<script>
export default {
  name: 'PullupOrPulldownRefresh',props: {
    // 最大移動距離
    maxMove: {
      type: Number,default: 300
    },// 阻尼係數
    friction: {
      type: Number,default: 0.3
    }
  },data() {
    return {
      startY: 0,ul: null,draw: null,up: null,down: null,y: 0 // 慣性回彈的距離
    }
  },mounted() {
    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)
    })
  },methods: {
    // 觸控開始事件
    touchstart(event) {
      this.startY = event.changedTouches[0].clientY
    },// 觸控移動事件
    touchmoveEvent(event) {
      const height = this.ul.clientHeight - this.draw.clientHeight
      if (height === 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) {
      if (this.friction * this.y >= 50) this.$emit('RefreshUp',this.friction * this.y)
      else if (this.friction * this.y < -50) this.$emit('RefreshDown',this.friction * this.y)
      else this.resetStyle()
    },// 重置並且新增過渡效果
    resetStyle() {
      this.ul.style.transition = 'transform .6s'
      this.ul.style.transform = 'translateY(' + 0 + 'px)'
      this.up.style.transition = 'all .6s'
      this.up.style.transform = 'translateY(-' + this.up.clientHeight + 'px) translateX(-50%)'
      this.down.style.transition = 'all .6s'
      this.down.style.marginTop = -this.down.clientHeight + 'px'
    },// 設定重新整理狀態
    setStatus(y) {
      this.$emit('setStatus',y)
    }
  }
}
</script>

<style lang="s">
.refresh {
  width: 100%;
  height: 100vh;
  border: 2px solid #ccc;
  position: relative;
  overflow: hidden;
  overflow: auto;
  position: fixed;
  ul {
    zoom: 1;
    padding: 0 10%;
  }

  ul::after {
    content: '';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  li {
    list-style: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .UpRefresh {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: -9;
  }
  .DownRefresh {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -10px;
    z-index: -9;
  }
}
</style>

• 元件的使用方法
• friction為摩擦係數
• @RefreshUp為下拉到一定距離觸發事件
• @RefreshDown為上拉到一定距離觸發事件
• @setStatus為更改重新整理狀態的方法

<template>
  <div>
    <PullupOrPulldownRefresh
      ref="PullupOrPulldownRefresh"
      :maxMove="maxMove"
      :friction="friction"
      @RefreshUp="RefreshUp"
      @RefreshDown="RefreshDown"
      @setStatus="setStatus"
    >
      <template v-slot:upTilte>
        <!-- <div class="UpRefresh" v-show="isUpRefresh">{{ Uptitle }}</div> -->
        <div class="UpRefresh" v-show="isUpRefresh">
          <img :src="require('@/assets/logo.png')" alt="基於vue封裝下拉重新整理上拉載入元件" />
          <p>{{ Uptitle }}</p>
        </div>
      </template>
      <ul>
        <li
          v-for="(item,index) in data"
          :key="index"
  Stcfv
 
        style="background: orange"
        >
          {{ item }}
        </li>
      </ul>
      <template v-slot:downTilte>
        <div class="DownRefresh" v-show="isDownRefresh">{{ Downtitle }}</div>
      </template>
    </PullupOrPulldownRefresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxMove: 300,friction: 0.3,data: [1,2,3,4,5,6,7,8,9,10],isUpRefresh: false,isDownRefresh: false,Downtitle: '上拉載入更多',Uptitle: '下拉重新整理'
    }
  },methods: {
    setStatus(y) {
      if (y && y > 0) {
        this.isUpRefresh = true
        this.Uptitle = '下拉重新整理'
        if (y >= 50) this.Uptitle = '鬆手重新整理'
        return
      }
      this.isDownRefresh = true
      this.Downtitle = '上拉載入更多'
      if (y <= -50) this.Downtitle = '鬆手載入更多'
    },RefreshUp(y) {
      if (!y) return
      if (y >= 50) {
        this.Uptitle = '正在重新整理'
        setTimeout(() => {
          for (var i = 1; i <= 10; i++) {
            this.data.push(this.data[this.data.length - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // 回彈重置
        },1000)
      }
    },RefreshDown(y) {
      if (!y) return
      if (y <= -50) {
        this.Downtitle = '正在加載'
        setTimeout(() => {
          for (var i = 1; i <= 10; i++) {
            this.data.push(this.data[this.data.length - 1] + 1)
          }
          this.$refs.PullupOrPulldownRefresh.resetStyle() // 回彈重置
        },1000)
      }
    }
  }
}
</客棧script>

<style scoped lang="scss">
.UpRefresh img{
  width: 30px;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。