Das mobile Terminal von vue.js implementiert Pull-Up-Laden und Pull-Down-Aktualisierung

Dieses Mal bringe ich Ihnen das mobile Terminal vue.js zum Implementieren von Pull-Up, Laden, Pull-Down und Aktualisieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von Pull-Up, Laden, Pull-Down? und auf dem mobilen Terminal von vue.js aktualisieren. Das Folgende ist ein praktischer Fall.

Genau wie beim horizontalen Scrollen verwenden wir immer noch die Better-Scroll-Bibliothek, um es zu implementieren. Da better auf eine neue Version aktualisiert wurde, war es zuvor Version 0.7. Nach dem Update stellte ich fest, dass es jetzt Version 1.2.6 ist und es weitere neue Versionen gibt. Da es sich um eine relativ einfach zu verwendende API handelt, habe ich auch den vorherigen Code umgeschrieben und die neue API verwendet, um das Pull-up-Laden und die Pull-down-Aktualisierung zu implementieren.

Schreiben Sie zuerst den Grundstil, der hier übersprungen wird, und stellen Sie dann die Better-Scroll-Bibliothek vor

import BScroll from 'better-scroll'

Zweitens können Sie beim Instanziieren des Bildlaufs im gemountetenLebenszyklus die Daten abrufen und dann neu, oder Sie können zuerst neu erstellen und dann nach dem Abrufen der Daten die Aktualisierung aufrufen.

Sie müssen während der Instanz einen Konfigurationsparameter übergeben. Weitere Informationen finden Sie in der Dokumentation. Hier sind nur zwei wichtige Punkte:

//是否开启下拉刷新，可传入true或者false,如果需要更多配置可以传入一个对象
pullDownRefresh：{
  threshold:80,
  stop:40
}
//是否开启上拉加载，同上，上拉无stop参数，这里需要注意是负数
pullUpLoad：{
  threshold:-80,
}
/**
 * 
 * @param threshold 触发事件的阀值，即滑动多少距离触发
 * @param stop 下拉刷新后回滚距离顶部的距离（为了给loading留出一点空间）
 */

Die oben genannten Zahlen erscheinen mir persönlich angemessener, aber da ich Taobao flexible.js zur Anpassung verwende, führt dies dazu: Der Abstand von 80 ist unter Android angemessen, unter iPhone 6s jedoch aufgrund der Skalierung 3 Jetzt sind 80 auf dem iPhone 6s etwa 27.

Daher müssen bei Bildschirmen mit unterschiedlichen Zoomstufen die entsprechenden Zoomverhältnisse multipliziert werden.

Taobao flexible.js verfügt tatsächlich bereits über diese Methode zum Ermitteln des Bildschirmzoomverhältnisses. Hier können Sie sie direkt daraus übernehmen:

//在util.js里面加一个方法
export function getDeviceRatio(){
  var isAndroid = window.navigator.appVersion.match(/android/gi);
  var isIPhone = window.navigator.appVersion.match(/iphone/gi);
  var devicePixelRatio = window.devicePixelRatio;
  var dpr;
  if (isIPhone) {
    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicePixelRatio >= 3) {        
      dpr = 3;
    } else if (devicePixelRatio >= 2){
      dpr = 2;
    } else {
      dpr = 1;
    }
  } else {
    // 其他设备下，仍旧使用1倍的方案
    dpr = 1;
  }
  return dpr
}

import{ DEVICE_RATIO} from '../base/js/api.js'
/*获取当前缩放比*/
const DEVICE_RATIO=getDeviceRatio();
 /*下拉配置*/
const DOWN_CONFIG={
 threshold:80*DEVICE_RATIO,
 stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
 threshold:-80*DEVICE_RATIO,
}
this.scroller = new BScroll(scrollWrap,{
 click:true,
 probeType:3,
 pullDownRefresh:DOWN_CONFIG,
 pullUpLoad:UP_CONFIG
});

Nach der Instanziierung besteht der nächste Schritt darin, auf Pull-Up- und Pull-Down-Ereignisse zu warten. betterScroll hat einige neue Events hinzugefügt, die wichtigsten sind:

/*下拉事件*/
this.scroller.on('pullingDown',()=> {});
/*上拉事件*/
this.scroller.on('pullingUp',()=>{});

Nachdem wir das Pull-Up- oder Pull-Down-Ereignis ausgelöst haben, müssen wir this.scroller.finishPullDown() oder this.scroller.finishPullUp() aufrufen, um zu benachrichtigen, dass das Better-Scroll-Ereignis abgeschlossen ist.

Der allgemeine Ablauf ist wie folgt:

this.scroller.on('pullingDown',()=> {
  
  <!-- 1. 发送请求获取数据 -->
  
  <!-- 2. 获取成功后，通知事件完成 -->
  
  <!-- 3. 修改data数据，在nextTick调用refresh -->
});

Normalerweise müssen wir nach Abschluss des Vorgangs die Aktualisierungsmethode manuell auslösen, um die scrollbare Entfernung neu zu berechnen, damit wir eine Uhr schreiben können, um Änderungen in den Daten zu überwachen, sodass wir nur die Daten ändern und nicht aufrufen müssen Aktualisierungsmethode jedes Mal nach der Verarbeitung der Daten.

watch:{
 dataList(){
  this.$nextTick(()=>{
   this.scroller.refresh(); 
  }) 
 }
},

Wenn die von Ihnen verwendete Version noch alt ist, können Sie während des on(scroll)-Ereignisses eine Entscheidung treffen, um die Funktion

this.scroller.on("scroll",(pos)=>{ 
  //获取整个滚动列表的高度
  var height=getStyle(scroller,"height");
  //获取滚动外层wrap的高度
  var pageHeight=getStyle(scrollWrap,"height");
  //触发事件需要的阀值
  var distance=80*DEVICE_RATIO;
  //参数pos为当前位置
  if(pos.y>distance){ 
    //console.log("下拉");
    //do something
   
  }else if(pos.y-pageHeight<-height-distance){
    //console.log("上拉");
    //do something
  }

zu implementieren Um mehrere Auslöser zu verhindern, müssen Sie 2 Schalter hinzufügen;

var onPullUp=true;
var onPullDown=true;

Setzen Sie jedes Mal, wenn ein Ereignis ausgelöst wird, den entsprechenden Schalter auf „false“ und setzen Sie ihn nach Abschluss des Vorgangs auf „true“ zurück. Andernfalls lösen mehrere Pulldowns oder Pullups mehrere Ereignisse aus. Durch Einstellen des Schalters können Sie sicherstellen, dass jeweils nur ein Ereignis ausgeführt wird.

Verpacken Sie es abschließend in eine Komponente

 <template>
  <p ref="wrapper" class="list-wrapper"> 
    <p class="scroll-content">    
      <slot></slot>     
    </p>   
  </p>
</template>

Da der spezifische Inhalt, der gescrollt werden muss, für jede Seite unterschiedlich ist, wird für die Verteilung ein Slot verwendet.

Die von der Komponente benötigten Parameter werden vom übergeordneten Element übergeben, und der Standardwert wird über prop

 export default {
  props: {
   dataList:{
    type: Array,
    default: []
   },
   probeType: {
    type: Number,
    default: 3
   },
   click: {
    type: Boolean,
    default: true
   },  
   pullDownRefresh: {
    type: null,
    default: false
   },
   pullUpLoad: {
    type: null,
    default: false
   },  
  }

empfangen und festgelegt Nachdem die Komponente gemountet wurde, verarbeitet sie das Ereignis nicht direkt, wenn das Ereignis ausgelöst wird, sondern sendet ein Ereignis an das übergeordnete Element. Das übergeordnete Element empfängt das Ereignis über die Vorlage v-on und verarbeitet die nachfolgende Logik

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: this.probeType,
      click: this.click,    
      pullDownRefresh: this.pullDownRefresh,
      pullUpLoad: this.pullUpLoad,
    })
  this.scroll.on('pullingUp',()=> {
    if(this.continuePullUp){
      this.beforePullUp();
      this.$emit("onPullUp","当前状态：上拉加载");
    }
  });
  this.scroll.on('pullingDown',()=> {
    this.beforePullDown();
    this.$emit("onPullDown","当前状态：下拉加载更多");
  }); 
}

Wenn Sie die übergeordnete Komponente verwenden, müssen Sie den Konfigurationsparameter Props übergeben und die von der untergeordneten Komponente ausgegebenen Ereignisse verarbeiten und das Slot-Tag

  <Scroller 
    id="scroll"
    ref="scroll" 
    :dataList="filmList"
    :pullDownRefresh="DOWN_CONFIG"
    :pullUpLoad="UP_CONFIG"
    @onPullUp="pullUpHandle"
    @onPullDown="pullDownHandle"
   >
    <ul>
       <router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to=&#39;{path:"/film-detail/"+v.id}&#39;>
          <p class="film-listimg">
             <img v-lazy="v.images.small" alt="" />        
          </p>
          <p class="film-listdetail">
            <p class="film-listdetailtitle">{{v.title}}</p>
            <p class="film-listdetaildirector">导演：{{filterDirectors(v.directors)}}</p>
            <p class="film-listdetailyear">年份：{{v.year}}<span>{{v.stock}}</span></p>
            <p class="film-listdetailtype">类别：{{v.genres.join(" / ")}}<span></span></p>
            <p class="film-listdetailrank">评分：<span>{{v.rating.average}}分</span></p>
          </p>             
        </router-link>
     </ul>     
   </Scroller>

durch spezifischen Inhalt ersetzen. Die übergeordnete Komponente kann die untergeordnete Komponente über this.$refs.xxx abrufen und die Methode in der untergeordneten Komponente aufrufen Der vollständige Inhalt der Scroller-Komponente lautet wie folgt:

 computed:{
    scrollElement(){
      return this.$refs.scroll
    }
  }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

   <template>
     <p ref="wrapper" class="list-wrapper"> 
       <p class="scroll-content">    
         <slot></slot>
         <p>
           <PullingWord v-show="!inPullUp&&dataList.length>0" :loadingWord="beforePullUpWord"></PullingWord>
           <Loading v-show="inPullUp" :loadingWord=&#39;PullingUpWord&#39;></Loading>
         </p>    
       </p> 
       <transition name="pullDown">
         <Loading class="pullDown" v-show="inPullDown" :loadingWord=&#39;PullingDownWord&#39;></Loading>
       </transition> 
     </p>
   </template>
   <script >
    import BScroll from 'better-scroll'
    import Loading from './loading.vue'
    import PullingWord from './pulling-word'
    const PullingUpWord="正在拼命加载中...";
    const beforePullUpWord="上拉加载更多";
    const finishPullUpWord="加载完成";
    const PullingDownWord="加载中...";
    export default {
     props: {
      dataList:{
       type: Array,
       default: []
      },
      probeType: {
       type: Number,
       default: 3
      },
      click: {
       type: Boolean,
       default: true
      },  
      pullDownRefresh: {
       type: null,
       default: false
      },
      pullUpLoad: {
       type: null,
       default: false
      },  
     },
     data() {
       return { 
         scroll:null,
         inPullUp:false,
         inPullDown:false,
         beforePullUpWord,
         PullingUpWord,
         PullingDownWord,
         continuePullUp:true
       }
     },
      
     mounted() {
       setTimeout(()=>{
         this.initScroll();
         this.scroll.on('pullingUp',()=> {
           if(this.continuePullUp){
             this.beforePullUp();
             this.$emit("onPullUp","当前状态：上拉加载");
           }
         });
         this.scroll.on('pullingDown',()=> {
           this.beforePullDown();
           this.$emit("onPullDown","当前状态：下拉加载更多");
         });
       },20)
       
     },
     methods: {
       initScroll() {
         if (!this.$refs.wrapper) {
           return
         }
         this.scroll = new BScroll(this.$refs.wrapper, {
           probeType: this.probeType,
           click: this.click,    
           pullDownRefresh: this.pullDownRefresh,
           pullUpLoad: this.pullUpLoad,
         })
       },
       beforePullUp(){
         this.PullingUpWord=PullingUpWord;
         this.inPullUp=true;
       }, 
       beforePullDown(){
         this.disable();
         this.inPullDown=true;
       },
       finish(type){
         this["finish"+type]();
         this.enable();
         this["in"+type]=false; 
       },
       disable() {
         this.scroll && this.scroll.disable()
       },
       enable() {
         this.scroll && this.scroll.enable()
       },
       refresh() {
         this.scroll && this.scroll.refresh()
       }, 
       finishPullDown(){
         this.scroll&&this.scroll.finishPullDown()
       },
       finishPullUp(){
         this.scroll&&this.scroll.finishPullUp()
       },   
     },
        
     watch: {
       dataList() {        
         this.$nextTick(()=>{
           this.refresh();            
         }) 
       }
     },
     components: {
       Loading,
       PullingWord
     }
    }
   </script>

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDas mobile Terminal von vue.js implementiert Pull-Up-Laden und Pull-Down-Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!