Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

So verwenden Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy

php中世界最好的语言
php中世界最好的语言Original
2018-05-28 14:24:101944Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung des Vue-basierten Lazy-Loading-Plug-ins vue? Hier ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.

Zweck: Bilder oder andere Ressourcen laden, nachdem Sie den sichtbaren Bereich betreten haben

Installieren und verwenden

  1. Laden Sie vue-view-lazy.min.js direkt im dist-Verzeichnis herunter und verwenden Sie

  2. Verwenden Sie npm, um

Direkt verwenden

<p id="app">
  <span v-view-lazy @model="handleModel"></span>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
  Vue.use(vViewLazy.default,{});
  new Vue({
    el:'#app',
    data:{
      msg:'数据'
    },
    methods:{
      handleModel(){
        console.log('出现了');
      },
    },
  })
</script>
npm:

$ npm install --save-dev vue-view-lazy

Vue-View-Lazy einführen

.main-Datei

import vView from 'vue-view-lazy'
Vue.use(vView,{
  error:'../../static/images/loading.png',
  loading:'../../static/images/loading.gif',
});

Verzögertes Laden von Bildern

.vue-Datei

<template>
  <ul id=&#39;img&#39;>
    <li class="in" v-for="(item,i) in imgs" :key="i">
      <img src="#" alt="图片" v-view-lazy="item.src">
    </li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        imgs:[
          {src:'../../static/images/img1.jpg'},
          {src:'../../static/images/img2.png'},
          {src:'../../static/images/img2.jpg'},
          {src:'../../static/images/img3.jpg'},
          {src:'../../static/images/img4.jpg'},
          {src:'../../static/images/img5.jpeg'}, 
        ]
      }
    },
    mounted(){
    },
  }
</script>
<style scoped>
  ...
</style>

Verzögertes Laden von Daten

.vue-Datei

<template>
  <p>
    <!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法-->
    <!--v-view-lazy=&#39;method&#39; 或 v-view-lazy=&#39;(e)=>method(e,...arg)'-->
    <p class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="(e)=>getAjaxContent(e,v.msg)">
      loading...
    </p>
    <p class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="getAjaxContent()">
      loading...
    </p>
  </p>
</template>
<script>
  export default {
    data(){
      return{
        msg:[]
      }
    },
    mounted(){
      fetch('http://localhost:3000/test').then(res=>res.json()).then(res=>{
        this.msg = res;
      })
    },
    methods:{
      getAjaxContent(event,msg){
        event.innerText = msg
      },
    }
  }
</script>
<style scoped>
  .cnt {
    /*background: #ececec;*/
    height: 500px;
    margin-bottom: 50px;
  }
</style>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Swiper in Vue

So kapseln Sie Angular-Netzwerkanfragen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Vue-basierte Lazy-Loading-Plug-in vue-view-lazy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn