公众号项目总结

项目名称：点歌系统公众号

项目介绍：一个移动端微信公众号里的点歌软件

负责部分：歌手详情页，搜索页，演唱列表，点歌完成页，打赏完成页

一.项目技术栈

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深度监听

以上就是我对这个项目的总结，本博客是原创，如有雷同纯属巧合！！！​​​​​​​