春节期间项目总结

今年春节赶上了疫情，因此就在疫情期间，我们团队在家做了好几个项目。遇到一些问题，记录一下。

主要做了四个项目，如下：

1. 问卷调查项目 地址
2. 疫情地图项目 地址
3. 戴口罩项目 地址
4. 找口罩项目 地址

问题总结收获如下：

1. 苹果手机滚动不流畅问题
   解决方法：-webkit-overflow-scrolling: touch;

2. 上下滚动的轮播图 现象：疫情地图项目首页，有一个展示疫情资讯的轮播图。使用了vant的swipe轮播组件，遇到一个问题，随着滚动次数的增多，就会出现越来越大的偏移。

问题定位：通过定位问题发现，轮播图每次往上滚动的距离是 36.421875px，实际我们使用的是rem，rem的换算导致出现到小数点的距离，所以每次滚动都会出现偏移量，随着次数的增多，越来越明显。

问题解决：更换了两次swipe组件后终于好了。 vue-awesome-swiper 传送门 点个赞~~~

1. dom没有渲染 现象：疫情项目首页，疫情地图tab，有一个本地疫情的卡片，前端获取到当前城市后，数据变了，但是页面没有改变。(PS:此处逻辑是前端调用后端接口获取定位，如果获取到定位，就展示当前定位城市的疫情，否则不展示。)

问题定位：vue中的数据变了，但是页面中没有更新。

问题解决：强制重新渲染 this.$forceUpdate()

1. 两个span标签 同一行显示问题 现象：疫情项目，同行程查询页面。 其他及其后面的文字，都是用的是span标签。在设置了display: inline-block;后，其他及其后面的文字在后面的文字超出一行的时候，就不会同一行显示了。

问题解决：设置 display: inline-block; 为 display: inline; 或者说不设置就不会有这个问题。(PS:当时是另一个同事写的)

PS: css也不简单

1. vue中监听对象的某个属性

computed: {
  urlHead(){
    return this.projectInfo.urlHead
  }
},
watch: {
  urlHead(newVal, oldVal){
    this.servicePrefixListLabel=this.projectInfo.urlHead.split('://{host}:')[0],
    this.host=this.projectInfo.urlHead.split('://{host}:')[1]
  },
}

1. vue移动端项目粘贴功能

问题描述：刚开始使用的是 clipboard这个包，但是遇到了一些问题。按钮的点击事件根据情况，可以复制，也可以跳转页面。

问题处理：换了使用vue-clipboard2这个包。