【swiper与ng-repeat关联渲染 _其他插件】

swiper与ng-repeat关联渲染
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
其他插件
详细描述
截图
代码
<div class="video-top">
    <div class="video-grade">年级</div>
    <div style="font-size: 40px; color: #7b4716;">|</div>
    <div class="video-subject">科目</div>
</div>

<div class="display">
    <div class="grade-subject">
        <div class="width30">初一</div>
        <div class="width30">初二</div>
        <div class="width30">初三</div>
        <div class="width30">高一</div>
        <div class="width30">高二</div>
        <div class="width30">高三</div>
        <div class="width30">全部</div>
    </div>
</div>
<div class="display">
    <div class="grade-subject">
        <div class="width30">语文</div>
        <div class="width30">数学</div>
        <div class="width30">英语</div>
        <div class="width30">物理</div>
        <div class="width30">化学</div>
        <div class="width30">生物</div>
        <div class="width30">全部</div>
    </div>
</div>
<div class="swiper-container">
    <!--<div class="swiper-scrollbar"></div>-->
    <div class="swiper-wrapper">
        <div class="swiper-slide" ng-repeat="Broadcast in banner">
            <img class="image" ng-src="{{Broadcast.coverPlanUrl}}" />
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
</div>
<div ng-repeat="item in cards" style="padding: 2em;background:#fff;" ng-click="Vdetailed(item.id)">
    <div class="flex">
        <div class="img-dad"><img class="Broadcast" style="-webkit-border-radius: 50%;" ng-src="{{item.authorImg}}"
                                  alt=""></div>
        <div>
            <div><b>{{item.authorName}}</b></div>
            <div style="color: #dcdcdc;">{{item.introduce}}</div>
        </div>
    </div>
    <br>
    <div><img class="Broadcast" ng-src="{{item.coverPlanUrl}}" alt="">{{item.createAt}}</div>
    <div class="twoEnds">
        <div style="display: flex; align-items: center;">
            <img class="six" src="../img/six.png" alt="" ng-hide="{{item.collectStatus}}">
            <img class="six" src="../img/sixsix.png" alt="" ng-show="{{item.collectStatus}}">
            {{item.praise}}
            <img class="six" src="../img/noCollection.png" alt="" ng-hide="{{item.praiseStatus}}">
            <img class="six" src="../img/Collection.png" alt="" ng-show="{{item.praiseStatus}}">
            {{item.collect}}
        </div>
        <div>{{item.createAt|date:'yyyy-MM-dd'}}</div>
    </div>
</div>
编辑于2024-11-20