基于Vue与jQuery模拟饿了么点餐Demo

淩亂°似流年 2022-04-22 03:46 208阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>点餐</title>
      
      <style>
        *{
      padding: 0;
      margin: 0;
    }
    .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;
      background: #eee;
    }
    .item{
      overflow: hidden;
      width: 100%;
      padding: 10px;
      background: #fff;
      border-bottom: 1px solid #eee;
    }
    .item-left{
      float: left;
    }
    .item-right{
      float: left;
      padding: 0 10px;
    }
    .item-img{
      width: 100px;
      height: 100px;
      background: #eee;
    }
    .title{
      width: 100px;
      height: 20px;
      margin-top: 10px;
      background: #eee;
    }
    .subtitle{
      width: 70px;
      height: 20px;
      margin-top: 10px;
      background: #eee;
    }
    .price{
      width: 50px;
      height: 20px;
      margin-top: 10px;
      background: #eee;
    }
        </style>
    
      <head>
    
      <body>
        <div class="header"></div>
        <div class="swiper-container">
          <ul class="swiper-container-ul">
            <li class="swiper-container-ul-li actives">商品</li>
            <li class="swiper-container-ul-li">店铺</li>
          </ul>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="content">
                <div class="left" id="left">
                  <ul>
                    <li v-for="item in items">{
       {item.name}}</li>
                  </ul>
                </div>
                <div class="right" id="right">
                  <ul>
                    <li v-for="item in items">
                      <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 class="swiper-slide" style="display:none;">
              店铺介绍
            </div>
          </div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.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) {
                $('#right').css('marginTop',$('.swiper-container-ul').height())
                $('.swiper-container-ul').css('position', 'fixed');
                $('.left').css('position', 'fixed');
                $('.right').css('margin-left', $('.left').width());
              } else {
                $('#right').css('marginTop',0)
                $('.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>
        <script>
          var left = new Vue({
            el: '#left',
            data: {
              items: [{
                  name: '分类1'
                },
                {
                  name: '分类2'
                },
                {
                  name: '分类3'
                },
                {
                  name: '分类4'
                },
                {
                  name: '分类5'
                },
                {
                  name: '分类6'
                },
                {
                  name: '分类7'
                },
                {
                  name: '分类8'
                }
              ]
            }
          });
          var right = new Vue({
            el: '#right',
            data: {
              items: [{
                  class: '分类1',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类2',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类3',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类4',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类5',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类6',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类7',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                },
                {
                  class: '分类8',
                  list: [{
                    title: '1'
                  }, {
                    title: '2'
                  }]
                }
              ]
            }
          });
        </script>
      </body>
    
    </html>