移动端网易云左右滚动导航栏

先看效果

这边用vue演示：

方法一：

display: flex;
overflow-y: auto;  /*overflow-y: scroll/hiddle;也行*/

利用flex和overflow-y可以帮我们实现左右滚动，但是有滚动条

利用伪对象选择器，实现隐藏

ul::-webkit-scrollbar {display: none;
}

flex布局在横向排列时，子元素的宽度会失效，这时，可以给子元素通过下面的属性固定宽度。

flex: 0 0 50px; /* 设置固定宽度 */

完整代码

<template><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
</ul>
</template><script>
export default {}
</script><style lang="less" scoped>
* {margin: 0;padding: 0;}ul {background: gold;display: flex;overflow-y: auto;}ul::-webkit-scrollbar {display: none;}ul li {/* width: 50px;设置了也不生效 */height: 30px;background: tomato;margin: 10px;list-style: none;        flex: 0 0 50px; /* 设置固定宽度 */}
</style>

方法二：

先把子元素变成内联块，让子元素自动在父容器中横排列

display: inline-block;

在父容器添加让子元素不换行，可以滚动

white-space: nowrap;
overflow-y: auto;

这个方法同样会出现滚动条，同样利用隐藏

ul::-webkit-scrollbar {display: none;
}

完整代码

<template><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
</template><script>
export default {}
</script><style lang="less" scoped>*{margin: 0;padding: 0;}ul{background: pink;white-space: nowrap;overflow-y: auto;/* -webkit-overflow-scrolling: touch;添加手滑模式touch  */}ul li{width: 50px;height: 30px;background: yellow;margin:10px;list-style: none;display: inline-block;}
</style>

移动端网易云左右滚动导航栏相关推荐

精讲前端实战项目之移动端网易云首页（附源码）
本篇文章分享给学习前端的朋友,可能你们长时间的学习了理论知识,对html,css,JavaScript等基础知识已经是相当熟悉了.但是没有一个自己的作品,那是因为缺乏练习一些实战项目.今天这个就是一个 ...
PC端网易云音乐播放云盘音乐时显示加载失败，自动调转下一首的解决方法
PC端网易云音乐播放云盘音乐时显示加载失败,自动调转下一首解决方法注意: 一定要看看是不是和你的情况一样,不一样不要用这种方法!!! 具体情况: 我们经常会下载歌曲存到电脑文件夹里,然后通过网易云音 ...
android 横向滚动导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
React实现(Web端)网易云音乐项目(六)，错过了真的可惜呀
今天实现歌曲播放时,歌词随着滚动的效果网易云原本的歌词是这样的 [00:00.000] 作曲 : 许嵩 [00:01.000] 作词 : 许嵩 [00:22.240]天空好想下雨 [00:24.38 ...
gulp仿移动端网易云音乐播放界面
网易云音乐,凭借其简洁的播放界面设计.歌曲推荐系统和完善的评论机制在市场上拥有超高人气的一款音乐播放器,深受网友喜爱.所以在这个在这个举国欢庆的假日里,我的魔爪终于伸向了她. 更新: Github传送 ...
安卓实现网易云音乐底部播放栏效果之使用UI绑定到Service上实现
先说原理:音乐播放需要使用到Service,而播放栏也是属于音乐播放的,那么为什么我们不把这两者合在一起呢? 把UI和音乐Service合在一起,用Service来控制UI界面不是更简单.在进入Act ...
React实现(Web端)网易云音乐项目(四)，错过了真的可惜呀
今天就写一下歌曲播放这个功能,进度条拉伸以及歌曲时间的变化,当我们改变一个状态的时候,其他几个都相应改变,这个功能还是有一点复杂的- 就是这个,当我们可以播放,暂停,当我们播放的时候,进度条改变以及歌 ...
仿网易云音乐app tab栏滑动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
小程序横向滚动导航栏
先上案例最终效果: 案例实现功能: 1.导航栏横向滚动效果 2.当前元素有下划线标识 3.点击元素,导航栏滚动到相应位置以下将分步骤逐步完善陈述这些功能,最终会呈现所有代码 1.引用组件scroll ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...

移动端网易云左右滚动导航栏

移动端网易云左右滚动导航栏

移动端网易云左右滚动导航栏相关推荐

最新文章

热门文章

移动端 网易云 左右滚动导航栏

移动端 网易云 左右滚动导航栏

移动端 网易云 左右滚动导航栏相关推荐

最新文章

热门文章

移动端网易云左右滚动导航栏

移动端网易云左右滚动导航栏

移动端网易云左右滚动导航栏相关推荐