手写CSS之可翻页banner的需求实现（一）静态数据

需求

1. 可横划banner 2个为1组
2. 标签和标题在同一行展示，限制标题展示2行，居中展示。
3. 数据动态获取。背景图片动态获取。

细节实现

1. swiper组件

   var mySwiper = new Swiper('.swiper-banner',{
      resistance : true,//处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。
      // autoplay: true,//可选选项，自动滑动
      direction : "horizontal",
      slidesPerView : 2,
      spaceBetween : -15,
      slidesPerGroup : 2,  
      pagination: {
         el: '.swiper-pagination',
         type: 'custom',
         renderCustom: function (swiper, current, total) {
            var _html = '';
            for (var i = 1; i <= total; i++) {
               if (current == i) {
               _html +=
                   '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
               } else {
                    _html += '<span class="swiper-pagination-customs"></span>';
               }
            }
            return _html; //返回所有的页码html
         }
      },
   })  
   

2. 同行居中展示且限制2行

   //HTML部分
   <div class="blockHeight">
       <div class="upBlock">
           <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span>
           <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle"></span>
           <span class="topicTitle" v-else>此文案未配置</span>
       </div>  
   </div>
   //CSS部分
   .blockHeight{
       display: flex;
       align-items: center;
       height: 2.5rem;
   }
   .upBlock{    
       display:-webkit-box;
       -webkit-line-clamp:2;
       -webkit-box-orient:vertical;
       overflow:hidden;
       word-break: break-all;
       margin: .5rem;
       padding-top: 0.7rem;
   }
   .topicWord{
       background-color:rgb(251, 92, 95);
       border-radius: 0.2rem;
       float: left;
       text-align: center;
       width: 0.8rem;
       height: 0.85rem;
       margin-right: 0.5rem;
       font-size: 0.5rem;
       color: white;
   }
   .topicTitle{
       color: black;
       font-size: .6rem;
   }
   

3. 背景图片动态获取

:style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''"

成果展示

效果如下图

最终实现

HTML部分

<div class="swiper-banner swiper-container" >                        
    <div class="swiper-wrapper">
        <div class="swiper-slide bannerSlide" v-for="(item,index) in recommendData[1]">
            <div class="moduleBlock" :style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''" v-if="(item.adviceCategory==2)||(item.adviceCategory==1)||(!item.adviceCategory)" @click='gotoRec(item)'>
                <div class="blockHeight">
                    <div class="upBlock">
                        <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span>
                        <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle">此题目未配置</span>
                        <span class="topicTitle" v-else>此文案未配置</span>
                    </div>  
                </div>                                  
                <div class="commentList">
                    <span class="commentContent" v-if="item.adviceDesc"  v-text="item.adviceDesc">此文案未配置</span>
                    <span class="commentContent" v-else>此文案未配置</span>
                </div>
            </div>

            <div class="moduleBlock" :style="item.imageUrl?'background:url('+item.imageUrl+');background-size: 100% 100%;':''" v-if="(item.adviceCategory==4)||(item.adviceCategory==5)" @click='gotoRec(item)'>
                <div class="blockHeight">
                    <div class="upBlock">
                        <span class="topicWord" v-if="item.tag" v-text="item.tag">热</span>
                        <span class="topicTitle" v-if="item.adviceTitle" v-text="item.adviceTitle"></span>
                        <!-- <div class="topicTitle" v-else v-text="getTitle(item.adviceRelateId)"></div> -->
                    </div>  
                    </div>                                                                      
                    <div class="commentList" v-if="item.adviceDesc">
                        <span class="commentContent" v-if="item.adviceDesc" v-text="item.adviceDesc"></span>
                        <!-- <span class="commentContent" v-else v-text="getComment(item.adviceRelateId)"></span> -->
                    </div>
                </div>
            </div>  
        </div>  
        <div class="bannerPage swiper-pagination"></div>                      
    </div>
</div>

CSS部分

.swiper-banner {
    width: 100%;
    height: 135px;  
    background-color: #fff;
    margin-bottom: .5rem;
}  
.moduleBlock{
    height: 5rem;
    border-radius: 0.4rem;
    margin: 0.8rem;
    background-color: rgb(255,247,247);
    background-size: 100% 100%;
}
.blockHeight{
    display: flex;
    align-items: center;
    height: 2.5rem;
}
.upBlock{    
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break: break-all;
    margin: .5rem;
    padding-top: 0.7rem;
}
.topicWord{
    background-color:rgb(251, 92, 95);
    border-radius: 0.2rem;
    float: left;
    text-align: center;
    width: 0.8rem;
    height: 0.85rem;
    margin-right: 0.5rem;
    font-size: 0.5rem;
    color: white;
}
.topicTitle{
    color: black;
    font-weight: bold;
    font-size: .6rem;
}
.commentList{
    margin:0.7rem
}
.commentContent{
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break: break-all;
    font-size: 0.5rem;
}