vue.js点餐app手机触屏滑动分类菜单切换代码免费下载

基于jQuery+vue.js点餐app手机触屏滑动分类菜单切换代码,仿美团订餐app界面分类导航效果。

JS代码

<script src="js/vue.min.js"></script> 
<script type="text/javascript"> 
  $(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); 
    }); 
    $('.swiper-container-ul-li').click(function(){ 
      var index = $(this).index(); 
      if(index == 0){ 
        $('.swiper-slide').eq(0).show(); 
        $('.swiper-container-ul-li').eq(0).addClass('actives'); 
        $('.swiper-slide').eq(1).hide(); 
        $('.swiper-container-ul-li').eq(1).removeClass('actives'); 
      }else { 
        $('.swiper-slide').eq(0).hide(); 
        $('.swiper-container-ul-li').eq(0).removeClass('actives'); 
        $('.swiper-slide').eq(1).show(); 
        $('.swiper-container-ul-li').eq(1).addClass('actives'); 
      } 
    }); 
  }); 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录