Virtul list ：Does it work rendering same item only one time？

1

F7-V2
When i made items as same content item collect,

var items = [{title:‘test’},{title:‘test’}{title:‘test’}];

the virtual-list only render only one time,it only display one list item!
Does it work only one time for rendering the item with same content?

2

Sorry!But i need some help.
I don know how to use virtual right way.
I did some test,but it don’t work correctly.
When i define virtual list item height as 1px,all items will display.
I changed the height of item to 1000px,items displayed not correctly.
Only few items displayed!
Why? And how to use virtual list to auto fit items height?

3

go to https://framework7.io/kitchen-sink/core/
open console:

app.views.current.routes.unshift({
  path:'/some-page/',
  component:{
    template:`
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">{{title}}</div>
          </div>
        </div>
        <div class="page-content">
          <div class="list virtual-list simple-list"></div>
        </div>
      </div>
    `,
    data:function(){
      var items = [];
      for(var i=1;i<=10000;i++){
        items.push({title:'Item '+i});
      }
      return {
        title:'virtual list',
        items:items
      };
    },
    on:{
      pageInit:function(e,page){
        var self = this;
        self.$app.virtualList.create({
          el:self.$el.find('.virtual-list'),
          items:self.items,
          itemTemplate:'<li>{{title}}</li>'
        });
      }
    }
  }
});
app.views.current.router.navigate('/some-page/');
4

This is my code. I don’t understand what’s wrong.Can you help me?
My browser display 55 items only.Why?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>Framework7</title>
<link rel="stylesheet" href="http://framework7.io/packages/core/css/framework7.min.css">
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
    <div class="page">
        <div class="page-content">
            <div class="list virtual-list media-list"></div>
        </div>
    </div>
</div>
<script src="http://framework7.io/packages/core/js/framework7.min.js"></script>
<script>
    var app = new Framework7({
    root: '#app',
    theme: 'md',
    });

    var MV = app.views.create('.view-main');
    var items=[];
    for(var j=0;j<100;j++){
    for (var i=0;i<100;i++){
        items.push({title:'test'+i});
    }
    }

    console.log(items);
    var v = app.virtualList.create({
    el: '.virtual-list',
    items: items,
    itemTemplate:
        '<li>>{{title}}</li>',
    //height: 1000,
    });
</script>
</body>
</html>
5

I found the different between our code: my list is media-list,yours is simple list
I changed class of the list to simple list,it works normal.
But i even don’t understand the reason for this.

6

the default is 44 for iOS theme and 48 for MD theme
which is the min-height of “.ios .list .item-content” and “.md .list .item-content”

if you’re using “list” with fixed height
you can remove the height-parameter

if you’re using “media-list” with fixed height
just add this to the vl

height: self.$theme.ios ? 63 : 73,

if your element dosen’t have a fixed height
you need to return the height forEach el

height:function(item){
  //return item height
}
7

Thank you very much.
I think if we use this component,we must know or fix each item height.
It’s not necessary choice for auto-adapt list to show items as different height.