モバイル端末でプルアップおよびプルダウンしてリフレッシュおよびロードする方法

今回は、モバイル端末でプルアップおよびスライドダウンしてリフレッシュおよびロードする方法を説明します。実際のケースを見てみましょう。見て。

理解できない場合は、コードを何度か読んでください。以下にその使用方法を説明します。

<template lang="html">
 <p class="yo-scroll"
 :class="{&#39;down&#39;:(state===0),&#39;up&#39;:(state==1),refresh:(state===2),touch:touching}"
 @touchstart="touchStart($event)"
 @touchmove="touchMove($event)"
 @touchend="touchEnd($event)"
 @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
  <section class="inner" :style="{ transform: &#39;translate3d(0, &#39; + top + &#39;px, 0)&#39; }">
   <header class="pull-refresh">
    <slot name="pull-refresh">
      <span class="down-tip">下拉更新</span>
      <span class="up-tip">松开更新</span>
      <span class="refresh-tip">更新中</span>
    </slot>
   </header>
   <slot></slot>
   <footer class="load-more">
    <slot name="load-more">
     <span>加载中……</span>
    </slot>
   </footer>
  </section>
 </p>
</template>
<script>
export default {
 props: {
  offset: {
   type: Number,
   default: 40
  },
  enableInfinite: {
   type: Boolean,
   default: true
  },
  enableRefresh: {
   type: Boolean,
   default: true
  },
  onRefresh: {
   type: Function,
   default: undefined,
   required: false
  },
  onInfinite: {
   type: Function,
   default: undefined,
   require: false
  }
 },
 data() {
  return {
   top: 0,
   state: 0,
   startY: 0,
   touching: false,
   infiniteLoading: false
  }
 },
 methods: {
  touchStart(e) {
   this.startY = e.targetTouches[0].pageY
   this.startScroll = this.$el.scrollTop || 0
   this.touching = true
  },
  touchMove(e) {
   if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
    return
   }
   let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
   if (diff > 0) e.preventDefault()
   this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
   if (this.state === 2) { // in refreshing
    return
   }
   if (this.top >= this.offset) {
    this.state = 1
   } else {
    this.state = 0
   }
  },
  touchEnd(e) {
   if (!this.enableRefresh) return
   this.touching = false
   if (this.state === 2) { // in refreshing
    this.state = 2
    this.top = this.offset
    return
   }
   if (this.top >= this.offset) { // do refresh
    this.refresh()
   } else { // cancel refresh
    this.state = 0
    this.top = 0
   }
  },
  refresh() {
   this.state = 2
   this.top = this.offset
   this.onRefresh(this.refreshDone)
  },
  refreshDone() {
   this.state = 0
   this.top = 0
  },
  infinite() {
   this.infiniteLoading = true
   this.onInfinite(this.infiniteDone)
  },
  infiniteDone() {
   this.infiniteLoading = false
  },
  onScroll(e) {
   if (!this.enableInfinite || this.infiniteLoading) {
    return
   }
   let outerHeight = this.$el.clientHeight
   let innerHeight = this.$el.querySelector('.inner').clientHeight
   let scrollTop = this.$el.scrollTop
   let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
   let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
   let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
   if (bottom < infiniteHeight) this.infinite()
  }
 }
}
</script>
<style>
.yo-scroll {
 position: absolute;
 top: 2.5rem;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 background-color: #ddd
}
.yo-scroll .inner {
 position: absolute;
 top: -2rem;
 width: 100%;
 transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
 position: relative;
 left: 0;
 top: 0;
 width: 100%;
 height: 2rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
.yo-scroll.touch .inner {
 transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
 display: block;
}
.yo-scroll.up .up-tip {
 display: block;
}
.yo-scroll.refresh .refresh-tip {
 display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
 display: none;
}
.yo-scroll .load-more {
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
} 
</style>

上記のコンポーネントをコピーし、サフィックス .vue を付けてコンポーネントとして保存し、コンポーネントの下に配置して、ページにインポートします。引用したデモ

のコードは次のとおりです。ご質問がございましたら、メッセージを残してください。

<template>
 <p>
    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
    <ul>
     <li v-for="(item,index) in listdata" >{{item.name}}</li>
     <li v-for="(item,index) in downdata" >{{item.name}}</li>
    </ul>
  </v-scroll>
 </p>
</template>
<script>
import Scroll from './y-scroll/scroll';
export default{
 data () {
  return {
   counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
   num : 15, // 一次显示多少条
   pageStart : 0, // 开始页数
   pageEnd : 0, // 结束页数
   listdata: [], // 下拉更新数据存放数组
   downdata: [] // 上拉更多的数据存放数组
  }
 },
 mounted : function(){
   this.getList();
 },
 methods: {
  getList(){
    let vm = this;
     vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
          vm.listdata = response.data.slice(0,15);
         }, (response) => {
          console.log('error');
        });
  },
  onRefresh(done) {
       this.getList();
    
       done() // call done
   
  },
  onInfinite(done) {
       let vm = this;
       vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
         vm.counter++;
         vm.pageEnd = vm.num * vm.counter;
         vm.pageStart = vm.pageEnd - vm.num;
         let arr = response.data;
           let i = vm.pageStart;
           let end = vm.pageEnd;
           for(; i<end; i++){
            let obj ={};
            obj["name"] = arr[i].name;
            vm.downdata.push(obj);
             if((i + 1) >= response.data.length){
             this.$el.querySelector('.load-more').style.display = 'none';
             return;
            }
            }
         done() // call done
          }, (response) => {
          console.log('error');
        });
      }
 },
 components : {
'v-scroll': Scroll
 }
}
</script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

beforeEnter フック関数の使用 (コード付き)

js を使用して画像を Base64 に変換する方法

以上がモバイル端末でプルアップおよびプルダウンしてリフレッシュおよびロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。