眼已望穿

【Web前端】Vue.js 项目中遇到的一些问题汇总

前言

最近在自己用 Vue.js 做一个仿网易云的 webApp，遇到了不少的问题，在这里做一个记录

better-scroll 的使用问题

better-scroll 是 Vue.js 中很好用的一个插件，能够很简单的实现滚动效果，先来看一下他的使用方法。

立即使用


  
    
       ...
       ...
       ...

通过 npm 使用

npm 安装，通过 import 引入，或者是 require

import BScroll from 'better-scroll'

var BScroll = require('better-scroll')

初始化

let scroll = new BScroll(document.getElementById('wrapper'), {
  // 相关参数
  ...
})

常用的参数有

scrollY: true 滚动方向为 Y 轴
scrollX: ‘true’ 滚动方向为 X 轴
click: true 是否派发click事件

更多详细请移步：better-scroll

注意事项

在 better-scroll 的使用中经常会出现一种情况：明明我是按照 api 初始化的，为什么不能滚动呢？

原因有如下：

未能正确取到相应的元素。在 Vue.js 中通过 this.$refs.refName 来取得
未能合理设置包裹层。例如，我们需要如下一段代码区域进行滚动：
```
  第一个
  第二个
  第三个
  ...
```
那么我们可以通过给 ul 添加两层 div，一层做父容器包裹层，一层做定位层

就可以变成如下：
```
  
    
      第一个
      第二个
      第三个
      ...
    
  
```
这样就可以正确初始化
未能在正确的时候初始化。

1) 这是什么意思呢？比如说你的 li 是通过从服务器请求的数据，来显示的。那么在你数据返回到 li 中之前，如果你初始化了 better-scroll，那么由于 wrapper 没有被撑开，导致 better-scroll 判断当前高度没有大于 scroll 区域的高度，所以不能滚动。这种情况，第一可以设置 setTimeout，通过延时来实现。第二，当数据是刷新的时候，调用 refresh() 方法即可。

2) 当一个路由中，有多个页面，子页面中有 scroll 的时候。路由中某些 item 点击事件控制着子页面的展示与隐藏。当加载完路由的时候，其实子页面中的 scroll 也被错误的初始化了，并没有得到真实的高度，导致不能滚动。这时候解决方法就是在 scroll 组件中监听 showFlag 的变动，跟监听 data 相似。
还有一些 css 方面导致不能滚动的问题，就不在这里进行赘述。总之就是一点，scroll 的高度固定，wrapper 的高度由子元素撑开，当 wrapper 的高度大于 scoll 的时候，此时初始化 better-scroll，就能进行滚动了。横着滚动同理

补充

better-scroll 会默认阻止默认事件，打开需要在初始化时

preventDefault: false

由此又衍生出了下面这个问题：

PC页面时，点击不会被 better-scroll 阻止事件，初始化给 better-scroll 派发事件，使移动端拥有点击事件，因此切换到PC端时，点击事件会被执行两次。

解决方法：在点击时，传 $event 变量，Better-scroll 插件中的 event 事件和原生 js 的 event 有属性上得区别，Better-scroll 插件派发的事件时 event_constructed 为 true，原生点击事件是没有这个属性的。

selectMenu(index,event){
if(!event._constructed){ // 如果不存在这个属性,则不执行下面的函数
    return;
}

}

vue-router 的相关问题

保持二级路由状态保持问题

最近做的项目是有两级路由，发现在第一级路由跳转的时候，第二级路由按钮的点击状态不能保持，于是琢磨了一会儿，想到了一个很笨的方法。

给每一个子路由添加一个点击事件，手动传进 index: 0,1,2,3…n
通过点击事件传入的 index ，保存到 localStorage
在 activated() 的时候，从 localStorage 中取值，用 switch 进行选择，跳转回对应 index 的路由

同名路由跳转

这是今天遇到的一个问题，网上找了很多资料，发现都是 1.0 的，有一些 2.0 的答案对于我这种萌新根本看不懂，于是采取了对我最复杂的方法：看文档

之前实现的功能有：对特定按钮进行点击，可以实现路由由 /a/1 跳转到 /a/2，但是数据没有刷新。

此时 Vue.js 提供了一个很好的方法，用 watch 观测路由的变化，进行数据刷新，具体操作如下:

export default {
  created() {
    this.getData()
  },
  methods: {
    getData() {
    // 获取数据的操作 
      ...
    }
  },
  watch: {
    '$route': 'getData'
  }

这样，就能让你在当前路由进行操作的时候，可以进行数据刷新了。比如，页面刷新了数据，恰巧有 better-scroll 在的时候，可以对相应的数据进行观测，来刷新 scroll。

watch: {
  someData() {
    this.scroll.refresh()
  }
}

总结

这只是最近学习遇到的比较大一点的问题，以后还会有更多，在这条路上走过这段初学的路程，以后相信会越来越好。共勉！