jq+vue实现左右联动滑动，商品分类页(仿京东，美团)

 

第一步，引入jq,vue.js,axios.js

第二步，页面布局

<div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <div class="content"> 
        <div class="left" id="left"> 
          <ul> 
            <li v-for="item in items" @click="clickFist(item)">{{item.name}}</li> 
          </ul> 
        </div> 
        <div class="right" id="right"> 
          <ul> 
            <li v-for="item in items1"> 
              <div class="class-title">{{item.class}}</div> 
              <div v-for="ite in item.list"> 
                <div class="item"> 
                  <div class="item-left"> 
                    <div class="item-img"></div> 
                  </div> 
                  <div class="item-right"> 
                    <div class="title">{{ite.title}}</div> 
                    <div class="subtitle"></div> 
                    <div class="price"></div> 
                  </div> 
                </div> 
              </div> 
            </li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </div> 

第三步，通过接口获取数据

var left = new Vue({ 
		el: '#left', 
		data: { 
		    items: [] 
		},
		methods:{
			getFistCatList(){
				var _this = this;
				axios.get("{:U('getFistCatListForVue')}")
	            .then(res=>{
	            	_this.items = res.data.data
	            })
			},
			clickFist(i){
				console.log(i);
			}
		},
	    created: function () {
	    	let that = this;
	    	that.getFistCatList();
	    	
	    }
	});

var right = new Vue({ 
	  	el: '#right', 
	  	data: { 
	    	items1: [null] 
	  	},
	  	methods:{
			
		},
	    created: function () {
	    	axios.get("{:U('getAllCatList')}")
	            .then(res=>{
	            	// _this.items = res.data.data
	            	let resultArr = [];
	            	let result = res.data.data;
	            	for (var i = 0;i < result.length;i++) {
	            		let childreArr = [];
	            		let childreList = result[i].children_list;
	            		for (var j = 0;j<childreList.length;j++) {
	            			childreArr.push({
	            				'title':result[i].children_list[j].name
	            			})
	            		}
	            		resultArr.push({
	            			'class':result[i].name,
	            			'list':childreArr
	            		})
	            	}
	            	this.items1 = resultArr
	            	console.log(resultArr);
	            	
	            })
	    	
	    }
	});

 这里有个坑，对vue不太熟悉的小伙伴要注意一下，vue的data{}中的数组对象在页面初始化前一定要给一个null，不然后面通过接口获取数据重新赋值给data{}里面的数据会失败，导致数据渲染失败。

第四步，使用jq来实现滑动联动

$(function(){ 
	  	$('.content').css('height',$('.right').height()); 

	  	$('.left ul li').eq(0).addClass('active'); 
		$(window).scroll(function(){ 
		    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',''); 
		    }; 
		    //滚动到标杆位置,左侧导航加active 
		    $('.right ul li').each(function(){ 
		      var target = parseInt($(this).offset().top-$(window).scrollTop()-150); 
		      var i = $(this).index(); 
		      if (target<=0) { 
		        $('.left ul li').removeClass('active'); 
		        $('.left ul li').eq(i).addClass('active'); 
		      } 
		    }); 
		  });
		  $('.left ul li').click(function(){ 
		    var i = $(this).index('.left ul li'); 
		    $('body, html').animate({scrollTop:$('.right ul li').eq(i).offset().top-40},500); 
		  }); 
	   
	});

完成！！

当然你也可以不用vue去接口后去数据，直接用jq的ajax获取数据也是没问题的。