码迷,mamicode.com
首页 > Web开发 > 详细

[DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能

时间:2016-06-24 15:42:39      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程;与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握、致用。

需求分析

当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如:

数据量过大,影响加载速度

用户体验差,很难定位到之前自己看过的某篇文章

扩展性差,如果200条变为2000条或者更多

所以常见的解决思路就是至底时加载数据或者分页展示。无限加载的实现过程类似于:

ajax类方法获取数据

数据存入本地数组

数组中的每条数据对应插入一个HTML模板片段中

将HTML片段append到节点中

前端分页的实现过程类似于:

ajax类方法获取数据

数据替换本地数组

数组中的每条数据对应插入一个HTML模板片段中

清空节点后将HTML片段append到节点中

往往修改或者维护代码时,我们会发现渲染HTML和插入部分是比较烦人的。因为我们需要将HTML拼接成字符串,在对应的位置插入数据,往往就是一段非常长的字符串,之后想要加个class都费劲。es6的模板字符串让这个情况有所好转,但是依然有瑕疵(例如实际编写时无法html代码高亮)。

同时我们还需要写不少for或者forEach去循环数组,再命令式的append,如果这段代码片段有一些复杂的交互,可能还需要通过事件代理绑定一堆方法。

如果在完成这类业务时,你也遇到过上述的问题,那么你就会发现Vue真是太coooooool了,let‘s vue!

新建一个Vue.js项目

强烈推荐使用vue-cli来新建一个项目。

一开始你可能会认为用node.js和npm安装一大堆库,生成了一些你不太了解的目录和配置文件,一写代码还会跳出一堆eslint的提示。但是这绝对物有所值,因为这样的一个模板可以帮你更好的理解Vue.js组织文件的思路,并且当你适应之后,你会发现这些条条框框极大地加快了你的开发效率。

在这次的教程中,我们新建了一个名叫loadmore的项目,具体的新建项目流程可以参照官网教程的安装一节。

布局页面结构

为了配合教程的逐步深入,我先从完成加载更多功能入手。为了和之后的分页保持一致,我的页面准备由两部分组成,一是信息列表,二是底部的一个加载更多的按钮,我将他们都放在App.vue这个根组件中。

  1. <template>
  2. <div id="app">
  3. <list></list>
  4. <a class="button" @click="next" >GO NEXT</a>
  5. </div>
  6. </template>
  7. http://www.ynmxzx.com/rzjw/20160622/3739.html
  8. <script>
  9. import List from ‘./components/List‘
  10. http://www.ynmxzx.com/rzjw/20160622/3740.html
  11. export default {
  12. components: {
  13. List
  14. },
  15. data () {
  16. return {
  17. ...
  18. }
  19. },
  20. methods: {
  21. next () {
  22. ...
  23. }
  24. }
  25. }
  26. </script>
  27. http://www.ynmxzx.com/rzjw/20160622/3741.html
  28. <style scoped>
  29. .button {
  30. display: block;
  31. width: 100%;
  32. background: #212121;
  33. color: #fff;
  34. font-weight: bold;
  35. text-align: center;
  36. padding: 1em;
  37. cursor: pointer;
  38. text-decoration: none;
  39. }
  40. .button span {
  41. margin-left: 2em;
  42. font-size: .5rem;
  43. color: #d6d6d6;
  44. }http://www.ynmxzx.com/rzjw/20160622/3742.html
  45. </style>
复制代码

在这个过程中,我们根据Vue的设计思想有了如下思路:

在信息列表中,我们会完成我们上文中提到的几个步骤,而这些步骤都只和信息列表本身有关,与Next按钮间唯一的联系就是Next点击后需要触发信息列表去获取,而这可以通过props传递。所以我们把列表及其自身业务逻辑、样式都放在List.vue这个组件中。

我们为按钮定义了一些基本的样式,但是我们用的css选择器就是一个.button类名,可能会和别的组件中的.button样式冲突,所以我们加入了一个scoped属性,让App.vue中的style样式只作用于这个组件内部。
注意:scoped并不会影响css的作用优先级,使用scoped不代表不会被外部样式表覆盖。

我们想引入一些基础样式,比如reset.css。如果在项目中使用了sass之类的语言,那么可以将对应的外部sass文件放在assets文件夹中,通过import引入。普通的css可以直接写在一个不加scoped属性的组件中,但是如果你确定这个样式表不会被频繁改动,那么也可以作为第三方静态资源引入index.html中。例如这个例子中,我在index.html中加入了:

  1. <link rel="stylesheet" href="./static/reset.css">
复制代码

效果:

技术分享

完成List.vue

目前我们主要的业务逻辑都是围绕信息列表展开的,也就是我们创建的List.vue。

首先,我们需要获取目标数据,我选用了cnodejs.org社区的API作为例子进行编写。如果你也想用一个封装好的ajax库的话,应该这么做:

引入第三方JS库

将目标JS库文件放在static文件夹中,例如我选择的是reqwest.js,然后在index.html先引入。

  1. <script src="./static/reqwest.min.js"></script>
复制代码http://www.ynmxzx.com/rzjw/20160622/3743.html

然后在build配置文件夹中,修改webpack.base.conf.js,export externals属性:

  1. externals: {
  2. ‘reqwest‘: ‘reqwest‘
  3. }http://www.ynmxzx.com/rzjw/20160622/3744.html
复制代码

这样我们在我们的项目中,就可以随时加载第三方库了。

  1. import reqwest from ‘reqwest‘
复制代码
写个API接口

在这个例子中,我们只需要调用文章列表这一个接口,但是实际项目中,可能你需要调用很多接口,而这些接口又会在多个组件中被用到。那么调用接口的逻辑四散在各个组件中肯定是不好的,想象一下对方的url发生了变化,你就得在无数个组件中一个个检查是否要修改。

所以我在src文件夹中新建了一个api文件夹,用于存放各类API接口。当前例子中,要获取的是新闻列表,所以新建一个news.js文件:

  1. import reqwest from ‘reqwest‘
  2. http://www.ynmxzx.com/xbzx/20160622/3745.html
  3. const domain = ‘https://cnodejs.org/api/v1/topics‘
  4. export default {
  5. getList (data, callback) {
  6. reqwest({
  7. url: domain,
  8. data: data
  9. })
  10. .then(val => callback(null, val))
  11. .catch(e => callback(e))
  12. }http://www.ynmxzx.com/xbzx/20160622/3746.html
  13. }
复制代码

这样我们就拥有了一个获取新闻列表的API:getList。

编写组件

我们用一个

    作为新闻列表,内部的每一个
  1. 就是一条新闻,其中包括标题、时间和作者3个信息。

    在data中,我们用一个名为list的数组来储存新闻列表的数据,一开始当然是空的。我们再在data中设置一个名为limit的值,用来控制每页加载多少条数据,作为参数传给getList这个API。

    因此我们的template部分是这样的(加入了一些style美化样式):

    1. <template>
    2. <ol>
    3. <li v-for="news of list">
    4. <p class="title">{{ news.title }}</p>
    5. <p class="date">{{ news.create_at }}</p>
    6. <p class="author">By: {{ news.author.loginname }}</p>
    7. </li>
    8. </ol>
    9. </template>
    10. http://www.ynmxzx.com/xbzx/20160622/3747.html
    11. <style scoped>
    12. ol {
    13. margin-left: 2rem;
    14. list-style: outside decimal;
    15. }
    16. li {
    17. line-height: 1.5;
    18. padding: 1rem;
    19. border-bottom: 1px solid #b6b6b6;
    20. }
    21. .title {
    22. font-weight: bold;
    23. font-size: 1.3rem;
    24. }
    25. .date {
    26. font-size: .8rem;
    27. color: #d6d6d6;
    28. }http://www.ynmxzx.com/xbzx/20160622/3748.html
    29. </style>
    复制代码

    之后我们显然需要使用getList来获取数据,不过先想想我们会在哪几个地方使用呢?首先,我们需要在组件开始渲染时自动获取一次列表,填充基础内容。其次,我们在每次点击APP.vue中的Next按钮时也需要获取新的列表。

    所以我们在methods中定义一个get方法,成功获取到数据后,就把获取的数组拼接到当前list数组后,从而实现了加载更多。

    沿着这个思路,再想想get方法需要的参数,一个是包含了page和limit两个属性的对象,另一个是回调函数。回调函数我们已经说过,只需要拼接数组即可,因此只剩下最后一个page参数还没设置。

    在初始化的时候,page的值应该为1,默认是第一页内容。之后page的值只由Next按钮改变,所以我们让page通过props获取App.vue中传来的page值。

    最后则是补充get方法触发的条件。一是在组件的生命周期函数created中调用this.get()获取初始内容,另一是在page值变化时对应获取,所以我们watch了page属性,当其变化时,调用this.get()。

    最后List.vue的script长这样:

    1. <script>
    2. import news from ‘../api/news‘
    3. export default {
    4. data () {
    5. return {
    6. list: [],
    7. limit: 10
    8. }
    9. },
    10. props: {
    11. page: {
    12. type: Number,
    13. default: 1
    14. }
    15. },
    16. created () {
    17. this.get()
    18. },
    19. watch: {
    20. page (val) {
    21. this.get()
    22. }www.ynmxzx.com
    23. },
    24. methods: {
    25. get () {
    26. news.getList({
    27. page: this.page,
    28. limit: this.limit
    29. }, (err, list) => {
    30. if (err) {
    31. console.log(err)
    32. } else {
    33. list.data.forEach((data) => {
    34. const d = new Date(data.create_at)
    35. data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
    36. })
    37. this.list = this.list.concat(list.data)
    38. }
    39. })
    40. }
    41. }
    42. }
    43. </script>
    复制代码

    同时我们将App.vue中的修改为:

    1. <list :page="page"></list>
    复制代码

    再为page在App.vue中添加一个初始值以及对应的方法next:

    1. data () {
    2. return {
    3. page: 1
    4. }
    5. },
    6. methods: {
    7. next () {
    8. this.page++
    9. }
    10. }
    复制代码

    这样我们就已经完成了加载更多的功能。

    技术分享

    改写为分页

    因为之前我们的思路非常清晰,代码结构也很明了,所以改写起来会非常简单,只需要将List.vue中拼接数组改为赋值数组就可以了:

    1. // 常规loadmore
    2. // this.list = this.list.concat(list.data)
    3. // 分页
    4. this.list = list.data
    复制代码

    就这么简单的一行就完成了功能的改变,这就是Vue.js中核心的数据驱动视图的威力。当然,接下来我们还要做点更cooooool的。

    添加功能

    因为分页替换了原来的数组,所以仅仅一个Next按钮不够用了,我们还需要一个Previous按钮返回上一页。同样的,也给Previous按钮绑定一个previous方法,除了用this.page--改变page的值以外,还需要对this.page === 1的边界条件进行一个判断。

    同时为了方便知道我们当前的页数,在按钮中,加入{{ page }}显示页数。

    1. <a class="button" @click="next" >GO NEXT<span>CURRENT:{{page}}</span></a>
    复制代码
    transition动画

    编写和完善功能的过程中,已经充分体现了Vue.js清晰和便利的一面,接下来继续看看其它好用的功能,首先就是transition动画。

    为了展示transition的威力,首先我找到了一个模仿的对象:lavalamp.js(Demo地址)。

    在Demo中可以看到页面以一种非常优雅的动画过渡完成了切换内容的过程,其本身是用JQuery+CSS动画完成的,我准备用Vue.js进行改写。

    首先学习了一下原作者的实现思路以后,发现是将一个div作为loader,position设定为fixed。当翻页时,根据点击的按钮不同,loader从顶部或者底部扩展高度,达到100%。数据加载完毕后,再折叠高度,最终隐藏。

    那么初步的思路如下:

    添加一个loader,最小高度与按钮一致,背景同为黑色,让过渡显得更自然。

    loader高度需要达到一个屏幕的高度,所以设置html和body的height为100%。

    需要有一个值,作为loader是否显示的依据,我定为finish,其默认值值为true,通过给loader添加v-show="!finish"来控制其显示。

    在next和previous方法中添加this.finish = false触发loader的显示。

    在App.vue和List.vue建立一个双向的props属性绑定至finish,当List.vue中的get方法执行完毕后,通过props将App.vue中的finish设定为true,隐藏loader。

    给loader添加一个transition。由于动画分为顶部展开和底部展开两种,所以使用动态的transition为其指定正确的transition名称。

    新增一个值up,用于判断动画从哪个方向开始,其默认值为false。在previous方法中,执行this.up = true,反之在next方法中,则执行this.up = false。

    根据思路,写出的loader应该是这样的(style等样式设定在最后统一展示):

    1. <div id="loader" v-show="!finish" :transition="up? ‘up-start‘:‘down-start‘">
    2. <span>Loading</span>
    3. </div>
    复制代码

    可以看到我设定了up-start和down-start两种transition方式,对应的css动画代码如下:

    1. .down-start-transition {
    2. bottom: 0;
    3. height: 100%;
    4. }
    5. .down-start-enter {
    6. animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both;
    7. }
    8. .down-start-leave {
    9. animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both;
    10. top: 0;
    11. bottom: auto;
    12. }
    13. .up-start-transition {
    14. top: 0;
    15. height: 100%;
    16. }
    17. .up-start-enter {
    18. animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both;
    19. }
    20. .up-start-leave {
    21. animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both;
    22. top: auto;
    23. bottom: 0;
    24. }
    25. @keyframes expand {
    26. 0% {
    27. height: 3em;
    28. transform: translate3d(0, 0, 0);
    29. }
    30. 100% {
    31. height: 100%;
    32. transform: translate3d(0, 0, 0);
    33. }
    34. }
    35. @keyframes collapse {
    36. 0% {
    37. height: 100%;
    38. transform: translate3d(0, 0, 0);
    39. }
    40. 100% {
    41. height: 3em;
    42. transform: translate3d(0, 0, 0);
    43. }
    44. }
    复制代码

    设置了expand和collapse两个animation,再在transition的各个生命周期钩子中做对应的绑定,就达到了和lavalamp.js相接近的效果。

    为了保证动画能执行完整,在List.vue的get方法执行完之后,还使用了一个setTimeout定时器让finish延时0.5秒变为true。

    优化体验

    动画效果完成之后,实际使用时发现lavalamp.js还有个巧妙地设计,就是点击Previous后,页面前往底部,反之点击Next后则前往顶部。

    实现后者并不复杂,在next方法中加入以下一行代码调整位置即可:

    1. document.body.scrollTop = 0
    复制代码

    previous前往底部则略微复杂一点,因为获取到数据之后,页面高度会发生改变,如果在previous中执行scrollTop的改变,有可能会出现新的内容填充后高度变长,页面不到底的情况。

    所以我watch了finish的值,仅当点击按钮为previous且finish变化为false至true时前往底部,代码如下:

    1. watch: {
    2. finish (val, oldVal) {
    3. if (!oldVal && val && this.up) {
    4. document.body.scrollTop = document.body.scrollHeight
    5. }
    6. }
    7. }
    复制代码
    前端路由

    完成以上内容之后,发现不论翻到第几页,一旦刷新,就会回到第一页。vue-router就是为解决这类问题而生的。

    首先我们引入VueRouter,方式可以参考上文中的“引入第三方JS库”。然后在main.js对路由规则进行一些配置。

    我们的思路包括:

    我们需要在url上反映出当前所处的页数。

    url中的页数应该与所有组件中的page值保持一致。

    点击Next和Previous按钮要跳转到对应的url去。

    在这个例子中我们没有router-view。

    因此main.js的配置如下:

    1. import Vue from ‘vue‘
    2. import App from ‘./App‘
    3. import VueRouter from ‘VueRouter‘
    4. Vue.use(VueRouter)
    5. const router = new VueRouter()
    6. router.map({
    7. ‘/page/:pageNum‘: {
    8. name: ‘page‘,
    9. component: {}
    10. }
    11. })
    12. router.redirect({
    13. ‘/‘: ‘/page/1‘
    14. })
    15. router.beforeEach((transition) => {
    16. if (transition.to.path !== ‘/page/0‘) {
    17. transition.next()
    18. } else {
    19. transition.abort()
    20. }
    21. })
    22. router.start(App, ‘app‘)
    复制代码

    首先定义了一个名为page的具名路径。之后将所有目标路径为‘/‘,也就是初始页的请求,重定向到‘/page/1‘上保证一致性。最后再在每次路由执行之前做一个判断,如果到了‘/page/0‘这样的非法路径上,就不执行transition.next()。

    根据之前的思路,在App.vue中,获取路由对象的参数值,赋值给page。同时给两个按钮添加对应的v-link。

    最终的demo地址
    Github仓库

[DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能

标签:

原文地址:http://blog.csdn.net/hxm102581/article/details/51735975

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!