vue+swiper实现手机端移动端分类tab选项卡效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：vue+swiper实现手机端移动端分类tab选项卡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="false">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
   <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        .content {
      padding-top: 1.84rem;
    }
    header,
    footer {
      position: fixed;
      right: 0;
      left: 0;
      height: 1.84rem;
      line-height: 1.84rem;
      text-align: center;
    }
    header {
      top: 0;background-color: #efeeee;
    }
    footer {
      bottom: 0;background-color: #efeeee;
    }
    .menu-category {
      box-sizing: border-box;
      position: fixed;
      left: 0;
      top: 1.76rem;
      width: 4rem;
      bottom: 1.84rem;
      background: #f5f5f5;
      z-index: 1;
    }
    .menu-category .nav-list {
      height: 100%;
    }
    .menu-category .slide {
      width: 4rem;
      height: 2rem;
      line-height: 2rem;
      font-size: 0.6rem;
      color: #333;
      text-align: center;
    }
    .menu-category .sidehigh {
      font-weight: 700;
      color: #f85100;
      background-color: #fff;
    }
    .menu-category .sidehigh:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0.12rem;
      height: 2rem;
      background: -webkit-linear-gradient(left, #f85100, #fe8645);
      background: -o-linear-gradient(right, #f85100, #fe8645);
      background: -moz-linear-gradient(right, #f85100, #fe8645);
      background: linear-gradient(to right, #f85100, #fe8645);
    }
    .category-list {
      margin-left: 4rem;
      padding-bottom: 0.56rem;
      height: 100%;
      overflow: hidden;
    }
    .category-list .food-list {
      height: 100%;
      overflow-y: scroll;
    }
    .category-list li {
      float: left;
      margin: 0.6rem 0.7rem 0.32rem;
    }
    .category-list li a {
      width: 2.2rem;
      float: left;
    }
    .category-list li img {
      width: 2.2rem;
      height: 2rem;
    }
    .category-list li p {
      width: 100%;
      line-height: 0.8rem;
      font-size: 0.48rem;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      word-wrap: break-word;
    }
    </style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css">
    <script type="text/javascript">
        (function(){
            setRem();
            window.addEventListener('orientationchange' in window?"orientationchange":"resize",setRem);
            function setRem(){
                var html = document.getElementsByTagName('html')[0];
                var pageWidth = html.getBoundingClientRect().width;
                html.style.fontSize = pageWidth/15+'px';
            }
        })();
    </script>
</head>

<body>
    <div id="vertical-content" class="content" style="display: none;">
        <header>头部</header>
        <div class="classify-list">
            <div class="category-wrapper clear">
                <div class="menu-category">
                    <div class="swiper-container nav-list">
                        <div class="swiper-wrapper">
                            <div v-for="(slide, index) in classifyLeft" :key="slide.id" :class="['swiper-slide slide', {sidehigh: index === curIndex}]" @click="changeTab (index, $event)">
                                {{slide.title}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="category-list">
                    <ul class="food-list">
                        <li v-for="item of classifyRight" :key="item.id">
                            <router-link :to="{name: 'goodsdetail', query: {id: item.id, cid: curIndex}}">
                                 <img :src="item.url">
                                <p>{{item.title}}</p>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <footer>底部</footer>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script>
<script>
    new Vue({
        el: '#vertical-content',
        data: {
          classifyLeft: [
            {id: 1, title: '中式快餐'},
            {id: 2, title: '饮品'},
            {id: 3, title: '小吃'},
            {id: 4, title: '甜品烘焙'},
            {id: 5, title: '西式快餐'},
            {id: 6, title: '海鲜'},
            {id: 7, title: '烤肉'},
            {id: 8, title: '韩餐'},
            {id: 9, title: '小吃'},
            {id: 10, title: '甜品烘焙'},
            {id: 11, title: '西式快餐'},
            {id: 12, title: '甜品烘焙'},
            {id: 13, title: '韩.........完整代码请登录后点击上方下载按钮下载查看