cloud_music项目笔记

cloud_music项目中发现的问题与解决方法

一、滚动条问题

这里使用到了perfect-scrollbar的插件
然而初始化遇到了某些问题
- 滚动条无法正常显示
- 正常显示之后滚动条拖动却停留在顶部
解决方法
- 官方文档
- 应满足以下要求：
  - 容器必须具有position样式。
  - 该容器必须是普通容器元素。
  软件包中的CSS满足了这些要求，但是当您要更改CSS文件时请切记。
  - 容器必须具有overflow: hiddenCSS样式。
  - 滚动条的位置必须为absolute。
  - 滚动条x必须具有bottom或top，而滚动条y必须具有 right或left。
- 但是发现仅仅这样不够
  - 会发现可以显示但是无法滚动的问题(页面可以滚动, 但是滚动条没有下去)
    - 解决方法 (如下面css样式)
      - 这里面把scrollbar的大容器跟小容器(即显示的滚动条都配置了position)

<!-- 先要搞清楚初始化perfect-scrollbar的结构 -->
<div id="myScroll" ref="myScrollRef">
    <div class="content" ref="containerRef">
      <slot></slot>
    </div>
</div>
...

this.myScroll = new PerfectScrollbar(this.$refs.myScrollRef, {
	wheelSpeed: 1,
	wheelPropagation: true,
	minScrollbarLength: 20
})
// 这里面使用的是vue框架

#myScroll {
  > .ps__rail-y {
    width: 10px;
    position: absolute;
    right: 0;
    left: calc(100%);
    transform: translateX(-100%);
    > .ps__thumb-y {
      position: absolute;
      width: 10px;
      background-color: #e1e1e2;
      border-radius: 10px;
      &:hover {
        background-color: #cfcfd1;
      }
    }
  }
}

二、Debounce问题

2.1 debounce函数

function debounce (fn, delay = 300) {
  let timeout = null
  return function (...args) {
    console.log(1)
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      console.log(args)
      fn.apply(this, args)
    }, delay)
  }
}

2.2 使用方式

使用debounce的时候高频时候的是return回来的函数，而不是debounce的函数

三、perfectscrollbar问题

3.1 获取ref使用异步

使用nextTick来获取ref

3.2 使用perfectscroll来回到顶部

this.$refs.myScrollRef.scrollTop = top
其中myScrollRef是Dom对象，修改其scrollTop即可修改滚动的位置

3.3 scroll的update没有效果

试一试调用两次

四、Vue使用中的一些小问题

4.1 父子组件传递信息

img动态生成
- 在父组件中如果将要传递的信息初始化是为null，需要等待请求才能获得，则会报错，所以设置为{}或者[]

4.2 项目执行顺序问题

比如A组件的子组件是B
B在created或者mounted的时候需要A请求回来的数据传递给子组件B
但是B即使在setTimeout的异步操作下都是无法获取
- 解决方法:
  - 在A组件请求回来的时候用ref调用B组件的方法, 而不是在created中调用(确保已经返回获得数据)
  - 然后再加上setTimeout

4.3 watch检测vuex的改变

使用计算变量computed中保存$store中的值
然后使用watch对该值进行检测

五、字符串与数组处理问题

5.1 回车问题

由于葱服务器上面获取的内容是带有回车键如"学习.努力.上进.积极.自律.end 优秀.↵huangwenxin! fighting！↵（欢迎投稿）"
尝试: 把↵替换成<br/>
- 发现无法成功替换
- 原因: 获取字符串那刻会自动解析成
解决方法: str = str.replace(/ /g, '<br/>')

参考

5.2 提取数组

slice()

输入两个参数的时候, 是提取到最后面那个下标代表的元素的前一个元素
ex:

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

六、样式问题

6.1 超出两行省略号显示

{
    overflow:hidden;
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
    text-overflow:ellipsis;//溢出部分用省略号代替
    -webkit-line-clamp:2; //设置文本显示两行
    -webkit-box-orient:vertical;  //从上到下排列子元素;
    white-space:normal;
}

6.2 把浮动高度算进容器

在他的父容器添加overflow: hidden;

6.3 文字影响float排列问题

把文字的height设置为0
这时候文字会被隐藏, 在其父容器加上padding-bottom即可看见

6.4 让图片自动宽高占父容器宽100%且相等

.image-header{
position:relative
width:100%
height:0
padding-top:100%

}
.image-header img{
position:absolute
top:0
left:0
width:100%
height:100%

}

6.5 样式中设置取消点击事件

pointer-events: none;
可以作用在使用伪类元素作为**|或者/**分割符分开的时候为其屏蔽点击事件

6.6 height继承问题

父容器height设置为auto(即不设置)或者设置成min-height的时候, 高度不继承