记一下头条项目遇见的bug

1.vant组件中，van-pull-refresh下拉刷新界面因分辨率产生的问题：

（1）在375-667界面中显示正常

（2）但是在768-1024界面就只能显示一半

原因：是因为该插件的一个属性‘head-height’默认为50px，也就是下拉后显示文字区域的高度为50px，由于采用rem布局，在ipad显示状态字体会自动变大，但是组件用的还是px为单位，所以高度还是50，就导致了这个问题。

解决方法：手动设置head-height属性为一个变量，该变量根据系统分辨率，自动变换高度。下面上代码。

====这是下拉刷新组件====
<van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="refreshSuccessText"
      success-duration="1500"
      //新增下面这个属性
      :head-height="hh"
    >
=====在computed中设置自适应高度=====
 created() {
    this.hh = (50 * window.innerWidth) / 375;
  },
复制代码

2.在做搜索建议的时候，如果有带括号的搜索项出现的报错问题

具体报错：vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “SyntaxError: Invalid regular expression: /(a ==1 /: Unterminated group”

原因：是因为做搜索建议的时候，为了让搜索的关键字在搜索项中高亮，所以用的正则表达式将关键字包裹上特定的HTML标签然后加到结构中，但是当搜索项出现需要转义的符号时，正则表达式就会出现这些错误。

解决方法：在搜索建议正则表达式前新增一个正则表达式，用于筛选需要转义的字符，并且用replace将其前面加上”进行转义。

hightLight(text) {
      // 用replace替换成带css样式的html 标签
      const hightLightMsg = `<span class='active'>${this.searchText}</span>`;
      // 正则表达式需要根据不同的text转换 所以要用正则表达式的
      const transReg = /[.*+?|()\[\]{}\\]/g;
      const searchKeyWrods = this.searchText.replace(transReg, "\\$&");
      const reg = new RegExp(searchKeyWrods, "gi");
      return text.replace(reg, hightLightMsg);
    },
复制代码