手写CSS之可翻页banner的需求实现

在探索了一整天之后,得出了这样一份实现。如有更优化的方法,特别希望能得到前辈们的指正啊~~~

需求:

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

细节实现:

  1. swiper组件

  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%;‘:‘‘"

成果展示

效果如下图

手写CSS之可翻页banner的需求实现

最终实现

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;
}

手写CSS之可翻页banner的需求实现

上一篇:js 手撕代码高频面试题以及应用场景整理


下一篇:后缀表达式c++实现