工作总结(4)

发表于 | 分类于 ， ，

这篇工作总结，会整理一些比较零散的开发内容。

Element-UI相关

el-scrollbar组件

在查ElementUI官方文档的时候，你会发现找不到滚动相关的组件，但实际上是有一个关于滚动相关的组件，只是没有文档。就是el-scrollbar组件。

这个组件可以在查官方文档页面元素的时候找到，我是因为官方文档左右独立滚动而发现的。我们可以查查它的源码。

源码中，在scrollbar/src下有main.js文件，这个文件中就有关于srollbar的实现源码：

1
2
3
4
5
6
7
8
9
10
11
12
props: {
    native: Boolean, // 是否显示滚动条
    wrapStyle: {}, // 外层容器el-scrollbar__wrap同层的style样式
    wrapClass: {}, // 外层容器el-scrollbar__view同层的class样式
    viewClass: {}, // 内层容器el-scrollbar__view同层的style样式
    viewStyle: {}, // 内层容器el-scrollbar__view同层的class样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {
        type: String,
        default: 'div'
    }
},

上面就是我们使用el-scrollbar组件时可以传入的prop：native是用于判断是否显示滚动条，从源码的实现来看，滚动条是ElementUI自己实现的，也就是如果需要显示滚动条，可以考虑使用这个组件；noresize是用于判断是否需要监听尺寸变化事件，如果滚动内容的长度固定不变，可以设置为true以优化性能；tag是用于指定内层容器渲染的标签。知道这些，我们就可以知道怎么使用el-scrollbar组件了。

我们再看看ElementUI官网是怎么使用它的：以官网导航栏为例，在.el-scrollbar的父类.page-component上设定了高度为100%，然后在.el-scrollbar同层增加.page-component__nav类实现导航栏的样式，最后在内层容器内使用.side-nav再设定100%的高度。

我自己使用的过程中是在内层容器内使用一个类设定固定的高度，然后就可以实现滚动效果。

el-table 表头跟表格宽度不一致

我在开发中发现了这个问题，在网上也发现有很多人遇到这个问题，目前我使用的解决方案是：

1
2
3
4
5
6
7
8
/* 解决elementUI表头跟表格宽度不一致 */
body .el-table th.gutter {
    display: table-cell!important;
}
  
body .el-table colgroup.gutter {
    display: table-cell!important;
}

安卓跟iOS的坑

new Date()转换时间戳

在iOS的微信H5开发中，使用new Date('2019-5-4')会出现报错，究其原因是iOS下不能使用-，应该使用/，即new Date('2019/5/4')。

安卓非body标签无滚动条

在开发的过程中，我们发现在安卓系统中，页面中除了body之外其他标签都无法传滚动条，但是iOS系统就会有。这种情况下我们可以自己实现或借助一些UI框架实现滚动条。如果选择借助的话，可以考虑ElementUI的el-scrollbar组件(前面在分析源码的时候就有这样一个prop)，也可以考虑better-scroll插件，通过配置来实现滚动条。

前端开发的占位图

其实开发中如果能考虑上占位图的话，对用户的使用体验是有很高的提升的。以往通过加载条来表示加载会让用户觉得加载时间很长，而使用占位图则会给用户一种页面逐渐加载完毕的效果。

网上有很多推荐的占位图实现方案，有给未加载数据的容器加占位图样式的，有在数据加载完毕前先画一些占位容器的。这里就不一一细讲，主要是找到一个觉得挺不错的插件可以方便占位图的实现的：vue-content-loader。

这个插件是通过实现SVG组件来完成占位图，看起来效果还不错，而且官方还给出一个页面可以通过拉拽，数据调整实现占位图组件。

另外，它还有一个React版本。虽然我还没有使用过，不知道效果如何，但是我觉得应该是很有尝试的必要的。

vue中的图片懒加载

除了占位图的加载优化，图片的懒加载也是前端开发中比较常见的加载优化点。在一个页面上，如果需要加载的图片很多，一般都会考虑优先加载第一版的图片，等用户滚动页面时，出现在窗口内的图片才会被加载。

这里可以使用vue-lazyload插件。这个插件使用起来非常简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// npm
$ npm i vue-lazyload -S

//main.js
// 引入
import VueLazyload from 'vue-lazyload'
// 注册
Vue.use(VueLazyload)
// 配置
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

// 例子
<ul>
    <li v-for="img in list">
        <img v-lazy="img.src" >
    </li>
</ul>

以上是截取官方文档的部分代码。这样就可以完成简单的图片懒加载了。还有很多配置可以使用。