vue 横向菜单滚动定位_Vue之网易云音乐横向菜单滑动的实现

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

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

滑动菜单，并选择菜单项；

选择某个菜单项，该菜单项居中(去除边界菜单项)

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

前端DOM结构

• { {item.title}}

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

其中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%

.tabs

margin-top 3rem

height 2.5rem

width 100%

line-height 2.5rem

box-sizing border-box

overfl