Le terminal mobile vue.js implémente le chargement pull-up et l'actualisation déroulante

Cette fois, je vais vous apporter le terminal mobile vue.js pour implémenter le pull-up, le chargement, le pull-down et l'actualisation. Quelles sont les précautions pour implémenter le pull-up, le chargement, le pull-down. et actualisez sur le terminal mobile vue.js. Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

Tout comme le défilement horizontal, nous utilisons toujours la bibliothèque better-scroll pour l'implémenter. Puisque Better a été mis à jour vers une nouvelle version, il s'agissait auparavant de la version 0.7. Après la mise à jour, j'ai découvert qu'il s'agissait désormais de la version 1.2.6 et qu'il existe d'autres nouvelles versions. Il s'agit d'une API relativement facile à utiliser, j'ai donc également réécrit le code précédent et utilisé la nouvelle API pour implémenter le chargement pull-up et l'actualisation déroulante.

Écrivez d'abord le style de base, qui est ignoré ici, puis introduisez la bibliothèque de meilleur défilement

import BScroll from 'better-scroll'

Deuxièmement, lors de l'instanciation du scroll dans le cycle de vie monté, vous pouvez obtenir les données puis les nouvelles, ou vous pouvez d'abord les créer, puis appeler l'actualisation après avoir obtenu les données.

Vous devez transmettre un paramètre de configuration lors de l'instance. Comme il existe de nombreux paramètres, veuillez vous référer à la documentation pour plus de détails. Voici seulement deux points clés :

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

. Les chiffres ci-dessus me semblent personnellement plus appropriés, mais il y a un problème ici. Puisque j'utilise Taobao flexible.js pour l'adaptation, cela conduit à : la distance de 80 est appropriée sous Android, mais sous iPhone 6s, en raison de sa mise à l'échelle 3, donc maintenant, 80 équivaut à environ 27 sur l'iPhone 6s.

Par conséquent, pour les écrans avec différents niveaux de zoom, les taux de zoom correspondants doivent être multipliés.

Taobao flexible.js dispose en fait déjà de cette méthode pour obtenir le taux de zoom de l'écran. Ici, vous pouvez l'obtenir directement à partir de celui-ci :

//在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
});

. Après l'instanciation, l'étape suivante consiste à écouter les événements pull-up et pull-down. betterScroll a ajouté quelques nouveaux événements, les principaux sont :

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

Après avoir déclenché l'événement pull-up ou pull-down, nous devons appeler this.scroller.finishPullDown() ou this.scroller.finishPullUp() pour informer que l'événement better-scroll est terminé.

Le processus général est le suivant :

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

Habituellement, une fois l'opération terminée, nous devons déclencher manuellement la méthode d'actualisation pour recalculer la distance de défilement, afin que nous puissions écrire une montre pour surveiller les changements dans les données, de sorte que nous n'ayons besoin que de modifier les données et de ne pas avoir besoin d'appeler le méthode d'actualisation à chaque fois après avoir exploité les données.

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

Si la version que vous utilisez est encore ancienne, vous pouvez porter un jugement lors de l'événement on(scroll) pour implémenter la fonction

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
  }

Afin d'éviter plusieurs déclencheurs, vous devez ajouter 2 commutateurs ;

var onPullUp=true;
var onPullDown=true;

Chaque fois qu'un événement est déclenché, définissez le commutateur correspondant sur false, puis réinitialisez-le sur true une fois l'opération terminée. Sinon, plusieurs menus déroulants ou pull-ups déclencheront plusieurs événements. En définissant le commutateur, vous pouvez vous assurer qu'un seul événement s'exécute à la fois.

Enfin, emballez-le dans un composant

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

Étant donné que le contenu spécifique qui doit défiler est différent pour chaque page, un emplacement est utilisé pour le distribuer.

Les paramètres requis par le composant sont transmis par le parent et la valeur par défaut est reçue et définie via 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
   },  
  }

Une fois le composant monté, il ne traite pas l'événement directement lorsque l'événement est déclenché, mais envoie un événement au parent. Le parent reçoit l'événement via le modèle v-on et traite la logique suivante

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","当前状态：下拉加载更多");
  }); 
}

<.> Lors de l'utilisation du composant parent, vous devez transmettre le paramètre de configuration Props et traiter les événements émis par le composant enfant, et remplacer la balise slot

  <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>

par un contenu spécifique. Le composant parent peut obtenir le composant enfant via this.$refs.xxx et peut appeler la méthode dans le composant enfant

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

; Le contenu complet du composant scroller est le suivant

   <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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!