左右可滑动的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,宽度设定为足够的即可。
网友评论