麻烦大家拿了以后点歌关注再走 以后还会持续更新的
以下源码
<template>
<div>
<div class="swiper-container">
<!-- 商品 <-> 详情 -->
<ul class="swiper-container-ul">
</ul>
<!---->
<div class="swiper-wrapper">
<div class="content">
<!--左侧-->
<div class="left" id="left">
<ul>
<li v-for="(item1, k1) in items1" :key="k1" @click="left_click($event)">{{ item1.name }}</li>
</ul>
</div>
<!--右侧-->
<div class="right" id="right">
<ul>
<li v-for="(item2, k2) in items2" :key="k2" class="li_max">
{{ item2.name }}
<div class="class-top">
<!-- <img src="../assets/img/3.jpg" /> -->
</div>
<div class="class-title">{{ item2.class }}</div>
<div v-for="(item3, k3) in item2.list" :key="k3" style="display: inline-block;width: 30%;">
<div class="item" style="display: inline-block;">
<div class="item-left" style="display: inline-block;">
<div class="item-img" style="display: inline-block;">
</div>
</div>
<div class="item-right">
<div class="title">{{ item3.title }}</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
import $ from 'jquery';
export default {
name: '',
data() {
return {
items1: [
{
name: '分类1'
},
{
name: '分类2'
},
{
name: '分类3'
},
{
name: '分类4'
},
{
name: '分类5'
},
{
name: '分类6'
},
{
name: '分类7'
},
{
name: '分类8'
}
],
items2: [
{
class: '分类1',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类2',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类3',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类4',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类5',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类6',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类7',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
},
{
class: '分类8',
list: [
{
title: '1'
},
{
title: '2'
},{
title: '3'
}
]
}
]
};
},
created() {
this.scroll_init();
},
methods: {
scroll_init: function() {
$('.content').css('height', $('#right').height);
$('.left ul li')
.eq(0)
.addClass('active');
$(window).scroll(function() {
// 这里在滚动的时候做监听,如果翻上去的部分超过150的时候，切换商品和左侧这里做绝对定位，然后右侧的margin-left设置成左侧的宽度
if ($(window).scrollTop() >= 150) {
$('.swiper-container-ul').css('position', 'fixed');
$('.left').css('position', 'fixed');
$('.right').css('margin-left', $('.left').width());
} else {
$('.swiper-container-ul').css('position', '');
$('.left').css('position', '');
$('.right').css('margin-left', '');
}
// 获取右侧当前li距离顶端的高度 - 右侧已经翻上去的高度 - head的高度
$('.right ul li').each(function() {
var target = parseInt($(this).offset().top - $(window).scrollTop() - 150);
// console.log($(this));
var i = $(this).index();
// if target<=0 清除所又li的active, 给当前li赋予active
if (target <= 0) {
$('.left ul li').removeClass('active');
$('.left ul li')
.eq(i)
.addClass('active');
}
});
});
// 点击左侧li通过下标找到相应li的位置，通过animate滚动到相应的位置
$('.left ul li').click(function() {
console.log("dsadsa")
var i = $(this).index('.left ul li');
$('body,html').animate({
scrollTop: $('.right ul li').eq(i).offset().top - 0
},1000);
});
},
left_click: function (e) {
//e.srcElement,,表示触发点击事件的当前盒子元素DOM
var i = $(e.srcElement).index('.left ul li');
$('body,html').animate({
scrollTop: $('.right ul li').eq(i).offset().top - 40
},1000);
}
}
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
.right ul li:last-of-type{
padding-bottom: 90%;
}
.header {
width: 100%;
height: 150px;
background: #555;
}
.swiper-container-ul {
list-style: none;
overflow: hidden;
width: 100%;
background: #fff;
top: 0;
}
.swiper-container-ul-li {
width: 50%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.actives {
border-bottom: 1px solid #3190e8;
color: #3190e8;
}
.content {
width: 100%;
overflow: hidden;
}
.left {
top: 41px;
float: left;
width: 25%;
height: 100%;
background: #eee;
}
.left ul {
list-style: none;
}
.left ul li {
padding: 15px 5px;
text-align: center;
}
.active {
background: #fff;
border-left: 2px solid #3190e8;
}
.right {
float: left;
width: 75%;
height: 100%;
}
.right ul {
list-style: none;
}
.class-title {
padding: 7px 10px;
}
.class-top{
box-sizing: border-box;
background-color: rgba(0,0,0,0.5);
text-align: center;
height: 87px;
margin-top:5px;
margin: 5px 13px;
}
.class-top img{
width: 90%;
height: 100%;
}
.item {
overflow: hidden;
width: 90%;
padding: 10px;
background: #fff;
border-bottom: 1px solid #eee;
display: inline-block;
text-align: left;
}
.item-left {
width: 100%;
}
.item-right {
}
.item-img {
width: 100%;
height: 100px;
background: #eee;
display: inline-block;
}
.title {
width: 100%;
height: 20px;
margin-top: 10px;
background: #eee;
text-align: center;
}
.subtitle {
width: 70px;
height: 20px;
margin-top: 10px;
background: #eee;
}
.price {
width: 50px;
height: 20px;
margin-top: 10px;
background: #eee;
}
</style>
末了 大家记得安装依赖哦 不然是木得效果的
