vue仿餓了麼商店詳情頁面（列表左右聯動、兩側滾動條互不影響）
阿新 • • 發佈：2018-12-21
商店詳情頁面中要求頁面劃上去之後到達某一位置時，嘴上的tabs標籤固定在最上邊，下邊的兩個選單列表可以滾動，且兩個滾動互不影響；點選左側的某一類別，右側跳轉到相對應部分。
HTML
<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="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">{{item.name}} <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> </div> </div> </li> </ul> </div> </div> </div> </div> </body>
CSS
/*基礎樣式*/ *{ 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; }
JS
<script> $(function () { $('.content').css('height',$('right').height) $('.left ul li').eq(0).addClass('active'); $(window).scroll(function () { /* 這裡在滾動的時候做監聽,如果翻上去的部分超過150（150是header的高度）的時候， 切換商品和左側這裡做絕對定位，然後右側的margin-left設定成左側的寬度*/ 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','') } // 獲取右側當前li距離頂端的高度 - 右側已經翻上去的高度 - head的高度 $('.right ul li').each(function () { var target = parseInt($(this).offset().top - $(window).scrollTop() - 150) console.log($(this)) var i = $(this).index() // if target<=0 清除所又li的active, 給當前li賦予active if(target<=0){ $('.left ul li').removeClass('active'); $('.left ul li').eq(i).addClass('active') } }) }) // 點選左側li通過下標找到相應li的位置，通過animate滾動到相應的位置 $('.left ul li').click(function () { var i = $(this).index('.left ul li') $('body,html').animate({scrollTop: $('.right ul li').eq(i).offset().top-40},1000) }) }) </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>