Onsen UI Infinite List，将修饰符设置为'longdivider不起作用答案

【问题标题】：Onsen UI Infinite List, setting the modifier as 'longdivider does not workOnsen UI Infinite List，将修饰符设置为'longdivider不起作用
【发布时间】：2016-12-12 07:19:09
【问题描述】：

我在我的网络应用程序中使用了一个无限列表。这是我创建列表的角度代码：

unverifiedPicturesInfiniteList.delegate = {
  createItemContent: function(i) {

    var pictureObject = $scope.unverifiedPictures[i];
    var currentPictureID = $scope.unverifiedPictures[i]._id + 'VERIFYBUTTON';

    var profilePictureSource = '/getProfilePic/' + pictureObject.profilePicture.fileName;

    return  ons._util.createElement(
      "<ons-list-item modifier='longdivider' style='background-color: #C4C4C4;'>" + 
      "<div>" +
        "<img src=" + profilePictureSource + "></img>" + 
        "<br/><button id=" + currentPictureID + " class='btn btn-primary' type='submit'>Verify Picture</button>" +
      "</div>" + 
      "</ons-list-item>"
    );
  },
  countItems: function() {
    return $scope.unverifiedPictures.length;
  },
  calculateItemHeight: function() {
    return 275;
  }
};

如果您查看“ons-list-item”标签，您会看到我在哪里设置修饰符并更改列表元素的背景颜色。

颜色按照我定义的方式正确显示，但 longdivider 没有。

我做错了吗？这是 OnsenUI 中的错误吗？

更新我认为这是一个错误，因为“chevron”修饰符正确显示。我将在 Onsen UI 论坛上链接到此。

【问题讨论】：

标签： angularjs onsen-ui

【解决方案1】：

实际上这两个修饰符的实现方式不同，所以我认为这不是问题。

这可能只是浏览器/缩放问题。确保您没有查看缩小的页面。边框应该只有“半个像素”，因此您的浏览器可能无法正确显示它们。它们应该在实际设备上可见。

另一种选择是，如果您的项目是 276 px 而不是 275 - 也许您只是隐藏了边框。

更新 - 我用与你类似的代码创建了一个codepen 并注意到 - 你将背景设置为#c4c4c4，边框应该是#ccc，所以它只是你看不到它，因为整个项目基本上具有相同的颜色。查看我将颜色更改为#eee 的代码笔，您会看到那里的边框（可能）。如果不是 - 那么这是一个浏览器问题。

旁注：由于您使用的是 Angular，您可能有兴趣设置 configureItemScope 而不是 createItemContent

【讨论】：

再次感谢伊利亚的帮助。