这篇博客详细介绍了Dodou移动框架中滑动列表（.swiper-container）的样式设置和配置选项，包括宽度、高度、内边距、阴影效果等。文章还提及了滑动项（.swiper-slide）的样式，以及如何实现选中状态的高亮效果。此外，讨论了Swiper插件的使用，如设置自动调整视图数量、间距、鼠标吸附效果以及slide的偏移量等，帮助开发者更好地定制滑动列表交互体验。
dodou-移动框架-滑动列表
.swiper-container {
width: 100%;
height: 40px;
line-height: 39px;
margin: 20px auto;
box-shadow: 0px 1px 1px 1px #e4e4e4;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: auto;
height: auto;
}
.swiper-container .swiper-slide.on{
color:#1AAD19;
border-bottom:1px solid #1AAD19;
}
var swiper = new Swiper('.swiper-container', {
// scrollbar: '.swiper-scrollbar',
scrollbarHide: true,
slidesPerView: 'auto', //可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
centeredSlides: false, //设定为true时，活动块会居中，而不是默认状态下的居左。
spaceBetween: 30, // 类别之间距离
grabCursor: true,
slidesOffsetBefore : 10, //设定slide与左边框的预设偏移量(单位px)。
slidesOffsetAfter : 10, //设定slide与右边框的预设偏移量(单位px)。
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
