Vue之网易云音乐横向菜单的实现

最新推荐文章于 2023-05-30 11:26:06 发布

原创

最新推荐文章于 2023-05-30 11:26:06 发布 · 916 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #横向菜单 #better-scroll

本文介绍如何使用Vue和better-scroll实现类似网易云音乐的横向菜单。通过计算菜单内容总宽度，初始化better-scroll并监听点击事件，使选中菜单项居中。遇到Vue异步更新问题时，利用$nextTick确保DOM更新后再执行。

之前在学习的时候有稍微捣鼓一下网易云音乐，主要是为了学习Vue，巩固基础知识，然后看到这个横向菜单，当然个人也喜欢看球，所以每次看腾讯NBA的时候总是会想这个是这样实现的，于是借助之前还没写完的demo，完成这个横向菜单的实现，废话不多说，先上效果图

网易云音乐横向菜单

从使用虎牙直播横向菜单的体验得到，我们的横向菜单的业务逻辑如下：

滑动菜单，并选择菜单项；
选择某个菜单项，该菜单项居中（去除边界菜单项）

我们的使用的better-scroll这个插件来实现，具体安装请参考BetterScroll

前端DOM结构

<template>
  <div class="mv-tabs">
    <div class="tabs" ref="tabsWrapper">
      <ul ref="tab">
        <li v-for="(item, index) in tabs" :key="index" @click="selectItem(index)">
          <router-link tag="div" :to="item.to" class="tab-item">
            <span class="tab-link">{
   
   {
   
   item.title}}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

通过使用插件Vue来调试项目
Vue DOM

其中tabs包括菜单项名和它的路由

data () {
    return {
      tabs: [
        {
          to: '/mv/recommend-mv',
          title: '推荐'
        },
        {
          to: '/mv/music-mv',
          title: '音乐'
        },
        {
          to: 'show-mv',
          title: 'Show'
        },
        {
          to: '/mv/acg-mv',
          title: '二次元'
        },
        {
          to: '/mv/dance-mv',
          title: '舞蹈'
        },
        {
          to: '/mv/game-mv',
          title: '游戏'
        },
        {
          to: '/mv/mvs',
          title: 'mv'
        }
      ],
      mX: 0, // tab移动的距离
      tabWidth: 80 // 每个tab的宽度
    }

样式

.mv-tabs
    position relative
    top -5.5rem
    bottom 0
    width 100%

最低0.47元/天解锁文章