Question

我想在也使用vue-router的静态Web应用程序上使用vue-infinite-loading。

这是我的设置的简化代码笔：
https://codepen.io/anon/pen/ejeWbj?editors=1011

尝试在文档中复制basic use示例。

HTML：

<div id="app">
  <h1>vue-infinite-loading</h1>
  <p>
    <router-link to="/Home">/Home</router-link>
  </p>
  <router-view></router-view>
</div>

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://rawgit.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js"></script>

JS：

// create dummy data ----------------
var data_users = [
  {id:1, name:'john', height:71},
  {id:2, name:'jane', height:72},
  {id:3, name:'alex', height:73},
  {id:4, name:'peter', height:74},
  {id:5, name:'maria', height:75},
]
for (ii=1;ii<10000;ii++){
  data_users.push({id:6, name:'rand', height: Math.round(30+Math.random()*100) })
}

// router page  ----------------
const Home = {
  computed: {
    users2(){
      return this.$root.users; 
    }
  },
  template: `

<div id="perfect-scroll-wrapper" ref="scrollWrapper" infinite-wrapper>
  <ul>

    <li v-for="u in users2" v-text="u.height"></li>

  </ul>
  <infinite-loading @infinite="$root.infiniteHandler"></infinite-loading>
</div>

  `
};


// router ----------------
const router = new VueRouter({
  routes: [
    { path: '/Home', component: Home }
  ]
});


// app ----------------
var app = new Vue({
  router,
  data: {
    users: data_users
    ,list: []
  }
  ,methods: {
    infiniteHandler($state) {
      setTimeout(() => {
        console.log(this.list);
        const temp = [];
        for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i);
        }
        this.list = this.list.concat(temp);
        $state.loaded();
      }, 1000);
    }
  }
}).$mount('#app');

我不确定我是否安装正确。我为此添加了插件：

<script src="https://rawgit.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js"></script>

然后我将html示例复制到了路由模板中。
然后，我在根应用程序中复制了该方法，最后我将@infinite="infiniteHandler"更改为指向根应用程序：@infinite="$root.infiniteHandler"

似乎正在发生无限循环，这不是很好。
我刚刚开始学习vuejs，所以我无法完全理解如何将基本的vuejs与不同的插件混合使用。每个都有自己的文档，但是很少看到它们混杂在一起。

如何通过vue-router在静态Web应用程序中使用vue-infinite-loading

0 个答案: