豫ICP备17040950号-2

横向滚动效果

文章目录
  1. 1. 效果图

html部分:

1
2
3
4
5
6
7
8
9
10
11
<div class="tab-body">
<ul>
<li data-key="0">全部</li>
<li data-key="1">攻略</li>
<li data-key="2">案例</li>
<li data-key="3">故事会</li>
<li data-key="4">特别策划</li>
<li data-key="5">喜舍杯</li>
<li data-key="6">家居轶事</li>
</ul>
</div>

sass部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.tab-body{
background: #fff;
overflow-x: scroll;
ul{
width: 1000%;
li{
display: inline-block;
vertical-align: top;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.3rem;
color: #666;
padding: 0 .8rem 0 .8rem;
margin-right: 1.8rem;
&.active{
border-bottom: 4px solid #FF5500;
color: #FF5500;
}
}
}
}

js部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 初始type是全部
$('.tab-body li').first().addClass('active');
var type = 0;
// 设置导航条宽度
var totalWidth = 0;
$('.tab-body li').each(function(index, el) {
totalWidth += $(el).width()+parseInt($(el).css('margin-right'));
});
$('.tab-body ul').css({
'width': (totalWidth + 50)+ 'px'
});
// 切换type
$('.tab-body li').on('click',function(){
$('.tab-body li').removeClass('active');
$(this).addClass('active');
type = $(this).attr('data-key');
var param = {
articleType: type,
pageNo: 1,
pageSize: 4
}
$.ajax({
url: '/inspiration/home/api',
type: 'POST',
dataType: 'json',
data: param,
success: function(data){
//把新获得的数据插入到页面
},
error: function(xhr){
console.log(xhr)
}
});
});

效果图