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

最新推荐文章于 2023-12-18 11:37:07 发布

Mrlonely思考笔记

最新推荐文章于 2023-12-18 11:37:07 发布

阅读量959

点赞数

本文链接：https://blog.csdn.net/zjhzjh893/article/details/83629624

版权

javascript基础知识回顾同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 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>
  <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
  <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>

Mrlonely思考笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Vue与jQuery模拟饿了么点餐Demo

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&am
复制链接

扫一扫