搜索页面实现总结

刚完成一个搜索页面，遇到很多问题也有很多第一次使用的技术。

1. 使用v-loading

2. @scroll的再次使用，函数的长度增减的问题

3. 定时加载，定时请求数据setTimeout，这里还有一个debounce

4. 输入值为空格的判断，trim（）函数。分为两种场景，input框内的处理和函数内value值的手动处理

5. 搜索到的字体使用高亮，在div中直接加v-html，vue中的一个API指令

6. 使用ellipse，在标题里面文字过长需要将长度隐藏。ellipse的使用不只是text-overflow，还可以写成{{ searchData || ellipse（25） }}

调试遇到的问题

1. 输入value值之后，再输入空格，请求的问题

2. 切换条件请求不到数据的问题

3. 背景色CSS样式加载冲突

4. 使用v-loading加载指令的使用

5. 滚动条。在进行切换的时候，滚动条跳转的问题。

6. 滚动加载的问题。滚到最低处，发送请求。在进行页面切换的时候，依旧触发上个页面的scroll函数。这个时候加的是个判断条件

7. 标题ellipse，没有处理

8. hover的问题，进行hover的时候，有些需要改变手型，很多细节没有注意到。

9. 粘贴复制进行搜索。如1所说，加入空格拒绝多次请求数据，这时候，受到影响的是多次粘贴同一个元素不再发请求。自己提供的解决思路是使用onPaste事件，在onPaste事件中控制oldValue值的清空，其实这里不用引入onPaste事件，控制oldValue值就可以控制这个问题。虽想到了value值的清空，但是方法多此一举。