1
ください 、VueのJsのが使用されている、あなたは私がこのようなツールを使用するパフォーマンス向上のために、アイテムの長いリストを提供する必要があります。 https://github.com/CatchLabs/vue-list-viewVue Jsでlist-viewを使用するには?私のプロジェクトで
を今私が提供し、このプラグインを使用して試してみました私は何が必要です。私の問題は、リストをスクロールすると空が表示されるため、それを機能させることができなかったことです。 誰かがこのプラグインまたはVue Jsで私を助けてくれた経験がありますか?
マイコード:
のJs
var ListView = require('./vue-list-view/lib/list-view');
var myListView = ListView.default({
template: '<div>{{ item.foo }}{{ item.bar }}</div>'
})
Vue.component('my-list-view', myListView)
new Vue({
el: '#list',
data: {
myArr: [{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'}]
}
})
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
<h4>Star</h4>
<div id="list">
<my-list-view :items="myArr"></my-list-view>
</div>
<h4>End</h4>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/vue.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
しかし、生成されたリストは空です。
あなたが小道具を追加し、テンプレートを修正する必要があり、非常に
を持つアイテムは、私はあなたのコードは次のようなものであるべきだと思います'' ' var myListView = ListView({ テンプレート: '