Question

我想在父列表的每个项目中显示一个迷你列表（包含两个项目）。

HTML code：

<caph-list container-class="list mt-1 ml-5" items="item in items" direction="horizontal">
   <div class="item ml-1" focusable on-focused="focus($event, $index)" on-blurred="blur($event)" on-selected="select($event, $index)" id="{{ 'item-' + $index }}">
      <caph-list container-class="list button-list ml-5" items="item in itemButtons" direction="horizontal">
         <img class="img-1 mt-2" src="images/tizen_32.png" focusable data-focusable-depth="7" />
      </caph-list>
      <img class="img-fluid" ng-src="{{item.picture}}"/>
   </div>
</caph-list>

CSS代码：

.list { 
   width: 1920px; 
   height: 255px;
}
.item {
   position: relative;
   width: 400px;
   height: 250px;
   box-sizing: border-box;
}
.button-list {
   position: absolute;
   width: 400px;
   height: 250px;
}
.img-1 {
   width: 60px;
   height: 60px;
   position: absolute;
   top:50%;
   transform: translateY(-50%);
}

尽管设置了每个宽度 - 元素的高度，但它会抛出这个错误：

Error: The caph-list's container and template view should have their own size such as width and height.

我有什么东西在这里失踪吗？有人可以帮忙吗？

Answer 1

尝试删除项目类选择器中的框大小调整。

Answer 2

在JQuery中是解决方案：

$(window).bind("load", function() {**
    
    var items = ["Test","Test","Test", "Test", "Test", "Test", "Test", "Test", "Test", "Test", "Test", "Test", "Test"];

    $('#list1').caphList({
        items: items,
        template: 'template1',
        containerClass: 'cnt',
        wrapperClass: 'wpa',
        direction: 'vertical',
        loop: 'true'
    });
});

这很重要，因为可以在页面自完成加载后加载列表。

Caph-list中的Caph-list

2 个答案: