需要引入:swiper相关插件,官网上有详细步骤
官网地址:https://www.swiper.com.cn/api/index.html
实现效果:
左滑:
html:
<!-- 列表 -->
<div class="lie-list">
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
style="width: 0px"
v-for="n in slideIcon"
:key="n"
>
<div class="swiper-item">
<img :src="n.imgUrl" alt="" />
<span class="icon_title">{{ n.text }}</span>
<p class="icon_smallTitle">{{ n.smallText }}</p>
</div>
</div>
</div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
css:
.icon_item {
display: flex;
flex-wrap: wrap;
margin-right: 0.5rem;
}
.lie-list {
width: 94%;
height: 7.1rem;
padding: 0 5%;
background-color: #fff;
box-sizing: border-box;
position: absolute;
top: 3.5rem;
border-radius: 0.4rem;
margin-left: 0.3rem;
padding-bottom: 0.1rem;
}
.swiper-slide-active {
width: auto !important;
}
.lie-list .swiper-container,
.lie-list .swiper-wrapper {
width: 100%;
height: 100%;
}
.lie-list .swiper-slide {
height: 0rem;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0.4rem 0;
}
.lie-list .swiper-slide a {
display: flex;
width: 25%;
}
.lie-list .swiper-slide a div {
width: 100%;
height: 50%;
display: flex;
margin: 0;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.swiper-item {
padding-right: 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
}
.lie-list .swiper-slide div img {
width: 1.6rem;
height: 1.6rem;
border-radius: 0;
}
.icon_title {
font-family: PingFang-SC-Bold;
font-weight: 700;
font-size: 0.35rem;
width: 1.68rem;
height: 0.7rem;
white-space: nowrap;
overflow: hidden;
color: #333;
text-align: center;
line-height: 0.7rem;
}
.icon_smallTitle {
margin-top: 0.02rem;
font-family: PingFangSC-Regular;
font-size: 0.2rem;
color: #999;
text-align: center;
height: 0.3rem;
line-height: 0.3rem;
white-space: nowrap;
overflow: hidden;
}
.swiper-scrollbar {
position: absolute;
left: 30%;
bottom: 5px;
z-index: 50;
height: 4px;
width: 35%;
}
js:
mounted() {
var swiper = new Swiper(".lie-list .swiper-container", {
slidesPerView: 4, //一行显示4个
slidesPerColumn: 2, //显示2行
slidesPerColumnFill: "row", //行布局
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
hide: false,
draggable: false,
slidesPerView: true,
snapOnRelease: true,
dragSize: 20,
},
});
},
注:
slidesPerColumnFill:
column:列布局
row:行布局