Question

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

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中的错误吗？

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

Answer 1

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

这可能只是一个浏览器/缩放问题。确保您没有查看缩小的页面。边界应该只是＃34;半个像素＆＃34;，所以也许你的浏览器只是没有正确显示它们。它们应该在实际设备上可见。

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

更新 - 我使用与您类似的代码制作了codepen并注意到 - 您将背景设置为#c4c4c4，边框应为{{1因为整个项目基本上都有相同的颜色，所以它只是你没有看到它。查看我将颜色更改为#ccc的codepen，您将看到那里的边框（可能）。如果没有 - 那么它就是浏览器问题。

旁注：既然你正在使用棱角分明，你可能有兴趣设置#eee而不是configureItemScope

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

1 个答案: