Question

任何人都可以解释如何制作如下图所示的用户列表......

我正在Meteor中创建一个项目，并使用Materialise作为模板，我想显示已分配用户的列表。如果有超过特定计数（比如5）的用户，我希望它们像在该图像上一样显示...我试过谷歌搜索这个并没有找到任何有用的东西。我还检查了Materialise网站，发现没什么用处。所以如果有人有想法，请帮助分享。

好的所以这是输出html，在这种情况下我只有一个成员但在实际情况下我会有更多：

<div class="row"> ==$0
<label class="active members_padding_card_view">Members</label>
<div class="toolBarUsers flex" style="float:right;">
<dic class="other-profile" style="background-color:#f06292;">
<span>B</span>
</div>

这是.js代码

Template.profile.helpers({
randomInitials: function () {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var nLetter = chars.charAt(Math.floor(Math.random()*chars.length));
var sLetter = chars.charAt(Math.floor(Math.random()*chars.length));
return nLetter + sLetter;
},
tagColor: function () {
var colors = ["#e57373","#f06292","#ba68c8","#9575cd","#7986cb","#64b5f6","#4fc3f7","#4dd0e1","#4db6ac","#81c784","#aed581","#dce775","#fff176","#ffd54f","#ffb74d","#ff8a65","#a1887f","#e0e0e0","#90a4ae"];
return colors[Math.floor(Math.random()*colors.length)];
},
randomAllowed : function(possible) {
    var count = Math.floor((Math.random() * possible) + 1);
    if(count == 1) {
        return;
    }
    return "none";
},

membersList() {
    const instance = Template.instance();
    const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
    return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId});
},
memberData: function() {
    // We use this helper inside the {{#each posts}} loop, so the context
    // will be a post object. Thus, we can use this.xxxx from above memberList
    return Meteor.users.findOne(this.lkp_user_fkeyi_ref);
},
showMembers() {
    const instance = Template.instance();
    const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());

    let membersCount = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
    ////console.log(membersCount);
    if (membersCount > 0) {
        $('.modal-trigger').leanModal(); 
        return true;
    } else {
        return false;
    }
},
});

现在，如果我添加了很多用户，我会得到这个：

Answer 1

这可以通过多种方式完成，但我使用了 CSS Flexbox 。

我已经使用了两个<div>一个包含正在扩展的类.each-user的单个用户圈子（供参考我已经采用6）而另一个包含用户总数上课.total-users。

这有点令人困惑，但如果您查看下面的代码或查看此Codepen，您就会了解所有内容。

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Roboto;
}

.container {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 20px;
}

/* Contains all the circles */
.users-holder {
  display: flex;
}

/* Contains all circles (those without total value written on it) */
.each-user {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  max-width: 300px;
  height: 50px;
  overflow: hidden;
}

/* Circle Styling */
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.each-user .circle {
  background: #00BCD4;
}

.each-user .circle:last-child {
  margin-right: 0;
}


/* Circle showing total */
.total-users {
  padding: 0;
  margin-bottom:
}

.total-users .circle {
  background: #3F51B5;
  margin: 0;
  position: relative;
}

.total-users .circle .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

＆＃13;

<div class="container">
  <div class="users-holder">
    <div class="total-users">
      <div class="circle">
        <span class="txt">+12</span>
      </div>
    </div>
    <div class="each-user">
      <div class="circle user-circle"></div>
      <div class="circle user-circle"></div>
      <div class="circle user-circle"></div>
      <div class="circle user-circle"></div>
      <div class="circle user-circle"></div>
      <!-- Sixth Circle -->
      <div class="circle"></div>
    </div>
  </div>
</div>

＆＃13;

希望这有帮助！

Answer 2

我使用过jQuery。见https://jsfiddle.net/q86x7mjh/26/

HTML：

<div class="user-list-container">
    <div class="total-circle hidden"><span></span></div>
    <div class="user-circle"><span>T</span></div>
    <div class="user-circle"><span>C</span></div>
    <div class="user-circle"><span>U</span></div>
    <div class="user-circle"><span>M</span></div>
    <div class="user-circle"><span>R</span></div>
    <div class="user-circle"><span>Z</span></div>
    <div class="user-circle"><span>N</span></div>
    <div class="user-circle"><span>O</span></div>
    <div class="user-circle"><span>M</span></div>
<div>

jQuery的：

var items_to_show = 5;

if($('.user-circle').length > items_to_show){

    var hide = $('.user-circle').length - items_to_show;

    for(var i = 0; i < hide; i++){
        $('.user-circle').eq(i).addClass('hidden');
    }

    $('.total-circle').removeClass('hidden');
    $('.total-circle span').text('+' + hide);

}

Answer 3

所以经过一段时间我解决了这个问题。我在这里发布我的答案给任何将来会遇到类似问题的人... 祝你有个美好的一天！

我在代码中添加了以下代码行：

return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId},{sort: {createdAt: -1}, limit: 3});

diffMembers(){
        const instance = Template.instance();
        const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
        const limit = 3;
        const allMembersOnCard = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
        let remainingMembers = allMembersOnCard - limit;
        return remainingMembers;
    },

在HTML中包含：

<div class="other-profile" style="background-color:#dedede;">
<span>+{{diffMembers}}</span>
</div>

仅显示少数用户并隐藏其他用户

3 个答案: