公众号项目总结 _样式

项目名称：点歌系统公众号
项目介绍：一个移动端微信公众号里的点歌软件
负责部分：歌手详情页，搜索页，演唱列表，点歌完成页，打赏完成页
一.项目技术栈
vue，vue-，vant，axios，vue-（发弹幕的插件），sass
二.项目技术点
1.搜索页
a.搜索框输入时，模糊搜索
代码部分：
【公众号项目总结】这边是前端做搜索，所以先得拿到他所以的歌曲数据，调用接口()去得到所有的歌曲数据，然后进行过滤，的原理也是循环遍历，与相似
这里要提到，，map的区别
1、
从数组或者集合中筛选出符合条件的数据
最后的返回值是满足条件的数据组成的数组或者集合
2、
循环遍历数组中的每一条数据，可以对每一个数据进行同一个操作
没有返回值
3、map
map是映射，把每个数据从一个形式映射成为另外一种形式，每一次遍历都会有返回值，最后所有的返回值组合成为最终的结果
————————————————

文章插图
此处为摘抄，原文链接：
b.点击搜索时，精准搜索
代码部分：
data部分有就不重复粘贴了
这里是精准搜索，开始的this.flag = false，是每次搜索都将样式改变成为默认的，如果未搜索到则this.flag = true，改变样式，里则是通过三目运算来下修改的，由于一些原因这里不方便展示太多
c.点歌事件
代码部分：
这里点击点歌按钮弹出遮罩层，要将点击项的歌曲名称带入到遮罩层上，所以要将值付给data里的，又因为搜索到歌曲点击点歌时，弹出层的输入框不可以点击，搜索不到时可以点击所以这个地方的input框里我写了一个:="swg"以此来判断，是否可以点击
d.遮罩层
代码如下：
这里@click.stop是阻止事件冒泡，此时要科普一下什么是事件冒泡，cs是测试函数
在一个对象上触发某类事件，这个事件会向这个对象的的父级传播，从里到外，直至它被处理或者到达了对象层次的最顶层，即对象。这个过程就是的事件冒泡。
此处参考博客园地址：
e.动态修改class名跟vue里v-for的用法（大佬跳过）
代码如下：
这相信都看的懂吧
2.演唱队列
a.简单的逻辑判断

文章插图
代码如下：
b.获取演唱列表
代码如下：
因为这里是后端数据发生改变，前端无法监听，所以只能写一个定时器，每隔10s去请求一次，看一下这歌列表是否发生改变，最后退出组件时，清除掉这个这个定时器
除了消除定时器的写法外，这里还有个关键点那就是，他第一次触发是你写的多少秒的时候触发，而不是代码运行到这里时触发第一次，所以我在定时器外又获取了一遍数据
3.歌手详情页
a.动态获取高
代码如下：
在vue里ref是一个神奇的东西，可以获取虚拟DOM，也可以得到很多东西，你可以打印this.$refs来看看结果
b.动态计算高
代码如下：
在移动端，适配很重要，当然也少不了计算属性calc呀
c.修改vant的样式
修改框架里的样式可以在前面加上::v-deep深度监听
以上就是我对这个项目的总结，本博客是原创，如有雷同纯属巧合！！！???????