问题的描述:

在歌曲列表页面使用了scroll插件,搜索了很多歌曲,页面出现滚动,选择播放一首歌曲,弹出播放器,将播放器最小化,页面回到歌曲列表,并且页面的底部出播放歌曲的信息(在没有播放歌曲的时候是没有的),在这样的情况下,歌曲列表不能下拉到最后的一首歌,因为被当前播放的歌曲信息挡住了

问题的原因:

当播放器最小化的时候,这时会在页面底部显示一个小播放器,小播放器是通过绝对定位到底部的,它的zindex比歌曲列表的高,所以挡住了歌曲列表,只要让整个歌曲列表往上移动小播放器的高度即可

问题的解决:

由于播放器列表是fixed 定位的,小播放器的高度是60px,所以给包裹列表的div添加bottom = 60px 即可,但是有很多地方都有这样的情况,例如 播放历史记录,排行榜,最近播放等页面,所以写一个mixmin,里面添加一个方法,只要组件用添加了这个mixmin,那么必须实现该方法,在方法里添加bottom

better-scroll 遇到的问题 2的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  5. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  6. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  7. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  9. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  10. UGUI 之Scroll Rect 坑

    由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...

随机推荐

  1. SEVERE: One or more listeners failed to start.

    Full details will be found in the appropriate container log file 错误日志在/home/dela/.IntelliJIdea2017.1 ...

  2. MobaXterm替换cmder

    Windows上命令行工具cmder确实很好用,其扩展功能呢,比系统自带强大几倍.后来在使用MobaXterm,官网https://mobaxterm.mobatek.net/免费版本功能足够强大,支 ...

  3. P4219 [BJOI2014]大融合 LCT维护子树大小

    \(\color{#0066ff}{ 题目描述 }\) 小强要在\(N\)个孤立的星球上建立起一套通信系统.这套通信系统就是连接\(N\)个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一 ...

  4. 改变iOS app的icon(iOS10.3)

    原文 改变iOS app的icon官方iOS10.3新增了可以让开发者去更改app的icon,接下来看看怎么更改.官方API给的东西很少,只是介绍了一个实例方法: 1 open func setAlt ...

  5. 二叉树的遍历 &【NOIP2001普及组】& 洛谷 P1030 求先序排列

    题目链接 https://www.luogu.org/problemnew/show/P1030 模板题 先讲一下二叉树的遍历 二叉树的遍历 分类 性质 求法 分为三类: 先序遍历(PreOrder) ...

  6. git 工作中常用命令

    git 命令: git  init  : 初始化 git  add .  :添加所有文件 git  status  :查看状态 若果是第一次会提示你输入你的 邮箱 和姓名: git  commit  ...

  7. P5022 旅行 (NOIP2018)

    传送门 先考虑是一颗树的情况 求最小的 dfs 序 显然按儿子编号从小到大dfs 如果有多一条边怎么办 显然会有一条边不用走 直接枚举删那条边然后每次都暴力 dfs 复杂度 $O(n^2)$ 注意每个 ...

  8. P5020 货币系统 (NOIP2018)

    传送门 BFS解法 显然如果一个面额A可以被其他面额表示出来 那么这个面额A就没用了 且如果A不能被其他面额表示,那么A一定有用(A本身的值只有自己可以表示) 发现面额最大不超过 25000 那么设 ...

  9. CF .Beautiful numbers 区间有多少个数字是可以被它的每一位非零位整除。(数位DP)

    题意:数字满足的条件是该数字可以被它的每一位非零位整除. 分析:大概的思路我是可以想到的 , 但没有想到原来可以这样极限的化简 , 在数位dp 的道路上还很长呀 : 我们都知道数位dp 的套路 , 核 ...

  10. linux 文件 s 权限

    s权限的作用:表示对文件具用可执行权限的用户将使用文件拥有者的权限或文件拥有者所在组的权限在对文件进行执行. s权限的设置:4,用户拥有者的执行权限位, 6,用户组的执行权限位, 2, 两者都设置, ...