Onsen UI Infinite List, 设置修饰符为 'longdivider 不起作用

Question

我在网络应用程序中使用无限列表。这是我用于创建列表的 angular 代码：

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 不正确。

我是不是做错了什么？这是温泉的bug吗UI?

更新我认为这是一个错误，因为 'chevron' 修饰符正确显示。我会 link 在 Onsen UI 论坛上讨论这个。

Answer 1

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

这可能只是一个 browser/zooming 问题。确保您没有查看缩小的页面。边框应该只有 "half a pixel"，因此您的浏览器可能无法正确显示它们。它们应该在实际设备上可见。

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

更新 - 我用类似于你的代码制作了一个 codepen 并注意到 - 你将背景设置为 #c4c4c4，边框应该是是#ccc，所以只是你看不到而已，因为整个item的颜色基本一样。查看我将颜色更改为 #eee 的代码笔，您会在那里看到边框（可能）。如果不是 - 那么这是浏览器问题。

旁注：由于您使用的是 angular，因此您可能对设置 configureItemScope 而不是 createItemContent

感兴趣

Onsen UI Infinite List, 设置修饰符为 'longdivider 不起作用

Onsen UI Infinite List, setting the modifier as 'longdivider does not work

angularjs

onsen-ui