Question

我试图让一个虚拟列表在Framework7中工作两天。在任何地方都有一个简单的例子，或者有人能够发布虚拟列表的代码。

我已经阅读了Framework7 docs至少10次，并尝试了许多不同的方式来放置文档中的代码。我也查看了tutorial reference。 NEITHER显示了如何真正做到这一点的实际脚本演示。我认为framework7是一项了不起的工作，但我只是想学习它。我不了解很多javascript。大部分文档都非常好，但对于像我这样的新手来说，一些比较困难和具有挑战性的事情还有很多不足之处。

我还搜索了stackoverflow，虚拟列表上有一些问题，但没有什么比我需要帮助更简单，也没有显示完整工作示例的代码示例。

我在哪里放置虚拟列表的javascript？我已经尝试将其放入myApp.js并使用脚本标记放入页面上的html中。

我已按照文档的说明将以下内容放入我页面的DOM中：

    <!-- Virtual List -->
<div class="list-block virtual-list">
  <!-- keep it empty -->
</div>

我不知道在哪里放置此代码，或者需要更多编码才能使其正常工作......

    var myList = app.virtualList('.list-block', {
    items: [1,2,3,4],
    height: 44
});

任何？

非常感谢...

Answer 1

你可以尝试下面的步骤，它在我的项目中工作

html代码

 <div id="no-margin-top" class="list-block media-list ">
   <div class="list-group list-virtual virtual-list"/>  
</div>

启动虚拟列表，还请添加参数＆＃34; renderItem＆＃34;使用html模板

 var myList = app.virtualList('.list-virtual', {
        // Array with items data
        items: [],
        height:132,
        rowsAfter:20,
        // Custom render function to render item's HTML
        renderItem: function (index, item) {
            return '<li class="browsing-item" id="item-' + item.id_event + '" data-id="' + item.id_event + '">' +

                            '<div class="item-subtitle" data-id="' + item.id_event + '">' + item.name + '</div>' +
                            '<div class="item-subtitle" data-id="' + item.id_event + '">' + item.address + '</div>' +

                    '</li>'
        }
    });

用相关的数组对象填充myList，如下例所示（使用方法＆＃34; appendItem＆＃34;）

for（var i = 0; i＆lt; data.data_event.length; i ++）{ myList.appendItem（data.data_event [I]）; }

Answer 2

确保将此代码添加到route.js文件中 { 路径：“ / mainapp /”，异步：功能（routeTo，routeFrom，解析，拒绝）{ //路由器实例 var router = this;

      // App instance
      var app = router.app;

      // Simulate Ajax Request
      setTimeout(function () {
        // We got user data from request
        var items = [];      
          app.request.promise.json('Url in the server')
          .then(function (res) {  
            for (var i in res.data){
                var foo = res.data[i].id 
         ...
                items.push({
                  title: foo ,

                })
            }
            return{
              items: items
            }
          });

        // Resolve route to load page
        resolve(
          {
            url: './pages/foo.html',
          },
          {
            on:{
              pageBeforeRemove:function(){

                app.virtualList.destroy();
              },
              pageInit:function(){
               var self = this.$app
                app.virtualList = app.virtualList.create({
                  // List Element
                  el: '.virtual-list',
                  // Pass array with items
                  items: items,
                  // List item Template7 template
                  itemTemplate:

                  //Put your html here and make sure you add template7 expressions like so <h1>{{this.title}}</h1>
                });
              }
            },
          }

        );
    }, 1000);
}

}，

Framework7中虚拟列表的工作示例

2 个答案: