美文网首页
左右可滑动的奖品栏(组件)

左右可滑动的奖品栏(组件)

作者: 寻欢 | 来源:发表于2019-04-02 09:57 被阅读0次

    左右可滑动的div,一开始开发的时候以为十分简单,便直接在网上找了组件去引用,发现都存在了少许的问题,与需求不符,所以自己写了一个。直接引用即可。

    
    <template>
    
    <div class="rankingReward">
    
        <div class="ranking-title"></div>
    
        <div class="ranking">
    
            <div class="rankingSlider">
    
                <img src="../../../assets/act_greenHat/第1名奖励.png" alt="">
    
                <img src="../../../assets/act_greenHat/第2名奖励.png" alt="">
    
                <img src="../../../assets/act_greenHat/第3名奖励.png" alt="">
    
                <img src="../../../assets/act_greenHat/第4名奖励.png" alt="">
    
                <img src="../../../assets/act_greenHat/第5-10名奖励.png" alt="">
    
            </div>
    
            </div>
    
        </div>
    
    </template>
    
    <script>
    
    export default {
    
        name: "rankingReward",
    
        props: {
    
            msg: String
    
        },
    
        data() {
    
            return {
    
            };
    
        }
    
    };
    
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    
    <style lang="scss" scoped>
    
    .ranking-title {
    
        width: 100%;
    
        height: 28px;
    
        background: url("../../../assets/act_greenHat/标题-排行榜前十奖励.png") no-repeat;
    
        background-size: 240px 100%;
    
        background-position: 50%;
    
        margin-bottom: 46px;
    
        border-radius: none;
    
    }
    
        .ranking {
    
            // width: 1000px;
    
            width: 100%;
    
            overflow: scroll;
    
            .rankingSlider {
    
                width: 1000px;
    
                height: 250px;
    
                overflow: hidden;
    
                img {
    
                    width: 180px;
    
                    display: inline-block;
    
                    height: 248px;
    
                    margin: 0 5px;
    
                    &:nth-child(1) {
    
                        margin-left: 30px;
    
                    }
    
                }
    
            }
    
        }
    
    </style>
    
    

    -确保最内存的div是不可以滑动的,即overflow为hidden,最重要的是最内层的div的宽度要足够容纳所有的图片,各种奖品的样式就不做细说

    -确保倒数第二层的div是可以滑动的,即overflow为scorll,宽度设定为足够的即可。

    相关文章

      网友评论

          本文标题:左右可滑动的奖品栏(组件)

          本文链接:https://www.haomeiwen.com/subject/djlwbqtx.html