vue 动态加动画滚动菜单

最新推荐文章于 2023-05-05 17:42:17 发布

爱好编程的老李头

最新推荐文章于 2023-05-05 17:42:17 发布

阅读量255

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43992330/article/details/117201709

版权

本文介绍了如何在Vue项目中创建一个动态动画效果的滚动菜单。通过结合Vue的响应式特性，实现菜单项随着滚动条变化而平滑过渡的效果，为用户带来更好的交互体验。

摘要由CSDN通过智能技术生成

<template>
  <div class="Index">
     <!-- 导航 -->
     <div class="apps-nav nav" ref="navH">
       <span>返回</span>
       <span>全部应用</span>
       <span @click="searchBtn">搜索</span>
     </div>
     <div class="apps-nav">
       <span>返回</span>
       <span>全部应用</span>
       <span @click="searchBtn">搜索</span>
     </div>
     <!-- 常用应用 -->
     <div class="apps-use">
       <div class="apps-all-title" ref="useH">常用应用</div>
           <ul class="apps-all-ul" ref="useT" v-show="show">
               <li v-for="(item2,index2) in apps1" :key="index2">
                  <img src="../../assets/icon.png" alt=""/>
                  <div>{
   {
   item2.name}}</div>
               </li> 
             </ul>
         <div class="apps-use-bottom" v-if="show1">
           <span class="apps-span" ref="useContent">以上内容展示在首页</span>
            <ul class="apps-all-ul" ref="useB">
               <li v-for="(item2,index2) in apps2" :key="index2">
                  <img src="../../assets/icon.png" alt=""/>
                  <div>{
   {
   item2.name}}</div>
               </li>
             </ul>
         </div>
     </div>
     <!-- 全部应用 -->
     <div class="apps-all">
       <div class="apps-all-title" ref="allTitle">全部应用</div>
       <ul :class="tabsFixed?'tabsFixed':'apps-tab-title'" ref="tabsMenuH">
         <li @click="tabMenu(item.title)" :class="currentKey === item.title ? 'active' : ''"  v-for="(item,index) in groups" :key="index">{
   {
   item.title}}</li>
       </ul>
       <div class="apps-all-use">
         <div class="apps-all-connect" v-for="(item1,index1) in groups" :key="index1" :ref="item1.title">
             <div class="apps-all-title apps-all-connect-title">{
   {
   item1.title}}</div>
             <ul class="apps-all-ul">
               <li v-for="(item2,index2) in item1.apps" :key="index2">
                  <img src="../../assets/icon.png" alt=""/>
                  <div>{
   {
   item2.name}}</div>
               </li>
             </ul>
         </div>
       </div>
     </div>
    </div>
</template>

<script>
export default {
   
   name:'Index',
   data() {
   
     return {
   
       num:0,
       show:true,
       show1:false,
       tabsFixed:false,
         apps1:[
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            }
          ],
            apps2:[
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
             {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
             {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
             {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
             {
   
              name:'测试册数1',
              icon:'../../assets/icon.png'
            },
            {