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的时候, 高度不继承