Vue.js implements infinite loading and paging function development
- 高洛峰Original
- 2016-12-08 09:31:592114browse
This article is a Vue.js tutorial. The goal is to use a common business scenario-pagination/infinite loading to help readers better understand some design ideas in Vue.js. Compared with many introductory tutorials on Todo List, it more comprehensively demonstrates the thinking process of using Vue.js to complete a requirement; compared with some advanced tutorials on building large-scale applications, it is more focused on the implementation of some fragmentary details for the convenience of readers. Quickly master and put it to use.
Requirements Analysis
When the amount of information in a page is too large (for example, there are 200 news items in a news list that need to be displayed), problems will occur, such as:
》The amount of data is too large, affecting the loading speed
》Poor user experience, it is difficult to locate an article that you have read before
》Poor scalability, if 200 items become 2000 or more
So the common solution is to load the data at the end or display it in pages. The implementation process of infinite loading is similar to:
1. Ajax class method to obtain data
2. Data is stored in a local array
3. Each piece of data in the array is inserted into an HTML template fragment
4. Insert the HTML fragment append to the node
The implementation process of front-end paging is similar to:
1. Ajax class method to obtain data
2. Data replaces the local array
3. Each piece of data in the array is inserted into an HTML template fragment
4. After clearing the node, append the HTML fragment to the node
Often when modifying or maintaining code, we will find that rendering HTML and inserting parts is more annoying. Because we need to splice HTML into a string and insert data at the corresponding position, which is often a very long string, and it is difficult to add a class later. The template string of es6 has improved this situation, but it still has flaws (for example, HTML code cannot be highlighted during actual writing). At the same time, we also need to write a lot of for or forEach to loop the array, and then append imperatively. If this code snippet has some complex interactions, we may also need to bind a bunch of methods through the event proxy.
If you have encountered the above problems when completing this type of business, then you will find that Vue is so coooooool, let's vue!
Create a new Vue.js project
It is highly recommended to use vue-cli Let’s create a new project.
At first you may think that using node.js and npm to install a lot of libraries will generate some directories and configuration files that you don’t know much about, and a bunch of eslint prompts will pop up as soon as you write the code. But it's definitely worth the money, because such a template can help you better understand Vue.js's ideas for organizing files, and when you adapt, you will find that these rules and regulations greatly speed up your development efficiency.
In this tutorial, we have created a new project called loadmore. For the specific new project process, please refer to the installation section of the official website tutorial.
Layout page structure
In order to cooperate with the gradual deepening of the tutorial, I will start by completing the Load More function. In order to be consistent with the subsequent paging, my page is prepared to consist of two parts, one is the information list, and the other is a load more button at the bottom. I put them both in the root component of App.vue.
<template>
<div id="app">
<list></list>
<a class="button" @click="next" >GO NEXT</a>
</div>
</template>
<script>
import List from './components/List'
export default {
components: {
List
},
data () {
return {
...
}
},
methods: {
next () {
...
}
}
}
</script>
<style scoped>
.button {
display: block;
width: 100%;
background: #212121;
color: #fff;
font-weight: bold;
text-align: center;
padding: 1em;
cursor: pointer;
text-decoration: none;
}
.button span {
margin-left: 2em;
font-size: .5rem;
color: #d6d6d6;
}
</style>
In this process, we have the following ideas based on Vue’s design ideas:
1. In the information list, we will complete several steps we mentioned above, and these steps are only Related to the information list itself, the only connection with the Next button is that after clicking Next, the information list needs to be triggered to obtain, and this can be passed through props. So we put the list and its own business logic and style in the List.vue component.
2. We have defined some basic styles for the button, but the css selector we use is a .button class name, which may conflict with the .button style in other components, so we added a scoped attribute to let The styles in App.vue only apply inside this component.
Note: scoped does not affect the priority of css. Using scoped does not mean that it will not be overridden by external style sheets.
3. We want to introduce some basic styles, such as reset.css. If a language such as sass is used in the project, the corresponding external sass file can be placed in the assets folder and introduced through import. Ordinary CSS can be written directly in a component without scoped attributes, but if you are sure that this style sheet will not be changed frequently, you can also introduce it into index.html as a third-party static resource. For example, in this example, I added:
Effect:
Complete List.vue
Currently our main business logic revolves around information lists, which is the List.vue we created. First, we need to obtain the target data. I chose the API of the cnodejs.org community as an example to write. If you also want to use an encapsulated ajax library, you should do this:
Introduce a third-party JS library
Put the target JS library file in the static folder, for example, I chose reqwest.js, and then in index. html is introduced first.
然后在build配置文件夹中，修改webpack.base.conf.js，export externals属性：
externals: {
'reqwest': 'reqwest'
}
这样我们在我们的项目中，就可以随时加载第三方库了。
import reqwest from 'reqwest'写个API接口
在这个例子中，我们只需要调用文章列表这一个接口，但是实际项目中，可能你需要调用很多接口，而这些接口又会在多个组件中被用到。那么调用接口的逻辑四散在各个组件中肯定是不好的，想象一下对方的url发生了变化，你就得在无数个组件中一个个检查是否要修改。
所以我在src文件夹中新建了一个api文件夹，用于存放各类API接口。当前例子中，要获取的是新闻列表，所以新建一个news.js文件：
import reqwest from 'reqwest'
const domain = 'https://cnodejs.org/api/v1/topics'
export default {
getList (data, callback) {
reqwest({
url: domain,
data: data
})
.then(val => callback(null, val))
.catch(e => callback(e))
}
}
这样我们就拥有了一个获取新闻列表的API：getList。
编写组件
我们用一个
- 作为新闻列表，内部的每一个
- 就是一条新闻，其中包括标题、时间和作者3个信息。
在data中，我们用一个名为list的数组来储存新闻列表的数据，一开始当然是空的。我们再在data中设置一个名为limit的值，用来控制每页加载多少条数据，作为参数传给getList这个API。
因此我们的template部分是这样的（加入了一些style美化样式）：
<template> <ol> <li v-for="news of list"> <p class="title">{{ news.title }}</p> <p class="date">{{ news.create_at }}</p> <p class="author">By: {{ news.author.loginname }}</p> </li> </ol> </template> <style scoped> ol { margin-left: 2rem; list-style: outside decimal; } li { line-height: 1.5; padding: 1rem; border-bottom: 1px solid #b6b6b6; } .title { font-weight: bold; font-size: 1.3rem; } .date { font-size: .8rem; color: #d6d6d6; } </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长这样：
<script> import news from '../api/news' export default { data () { return { list: [], limit: 10 } }, props: { page: { type: Number, default: 1 } }, created () { this.get() }, watch: { page (val) { this.get() } }, methods: { get () { news.getList({ page: this.page, limit: this.limit }, (err, list) => { if (err) { console.log(err) } else { list.data.forEach((data) => { const d = new Date(data.create_at) data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` }) this.list = this.list.concat(list.data) } }) } } } </script>同时我们将App.vue中的
- 修改为：
再为page在App.vue中添加一个初始值以及对应的方法next：
data () { return { page: 1 } }, methods: { next () { this.page++ } }这样我们就已经完成了加载更多的功能。
改写为分页
因为之前我们的思路非常清晰，代码结构也很明了，所以改写起来会非常简单，只需要将List.vue中拼接数组改为赋值数组就可以了：
// 常规loadmore // this.list = this.list.concat(list.data) // 分页 this.list = list.data
就这么简单的一行就完成了功能的改变，这就是Vue.js中核心的数据驱动视图的威力。当然，接下来我们还要做点更cooooool的。
添加功能
因为分页替换了原来的数组，所以仅仅一个Next按钮不够用了，我们还需要一个Previous按钮返回上一页。同样的，也给Previous按钮绑定一个previous方法，除了用this.page--改变page的值以外，还需要对this.page === 1的边界条件进行一个判断。
同时为了方便知道我们当前的页数，在按钮中，加入{{ page }}显示页数。
transition动画
编写和完善功能的过程中，已经充分体现了Vue.js清晰和便利的一面，接下来继续看看其它好用的功能，首先就是transition动画。为了展示transition的威力，首先我找到了一个模仿的对象：lavalamp.js（ Demo地址 ）。
在Demo中可以看到页面以一种非常优雅的动画过渡完成了切换内容的过程，其本身是用JQuery+CSS动画完成的，我准备用Vue.js进行改写。
首先学习了一下原作者的实现思路以后，发现是将一个div作为loader，position设定为fixed。当翻页时，根据点击的按钮不同，loader从顶部或者底部扩展高度，达到100%。数据加载完毕后，再折叠高度，最终隐藏。
那么初步的思路如下：
1.添加一个loader，最小高度与按钮一致，背景同为黑色，让过渡显得更自然。
2.loader高度需要达到一个屏幕的高度，所以设置html和body的height为100%。
3.需要有一个值，作为loader是否显示的依据，我定为finish，其默认值值为true，通过给loader添加v-show="!finish"来控制其显示。
4.在next和previous方法中添加this.finish = false触发loader的显示。
5.在App.vue和List.vue建立一个双向的props属性绑定至finish，当List.vue中的get方法执行完毕后，通过props将App.vue中的finish设定为true，隐藏loader。
6.给loader添加一个transition。由于动画分为顶部展开和底部展开两种，所以使用动态的transition为其指定正确的transition名称。
7.新增一个值up，用于判断动画从哪个方向开始，其默认值为false。在previous方法中，执行this.up = true，反之在next方法中，则执行this.up = false。
根据思路，写出的loader应该是这样的（style等样式设定在最后统一展示）：
<div id="loader" v-show="!finish" :transition="up? 'up-start':'down-start'"> <span>Loading</span> </div>
可以看到我设定了up-start和down-start两种transition方式，对应的css动画代码如下：
.down-start-transition { bottom: 0; height: 100%; } .down-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .down-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: 0; bottom: auto; } .up-start-transition { top: 0; height: 100%; } .up-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .up-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: auto; bottom: 0; } @keyframes expand { 0% { height: 3em; transform: translate3d(0, 0, 0); } 100% { height: 100%; transform: translate3d(0, 0, 0); } } @keyframes collapse { 0% { height: 100%; transform: translate3d(0, 0, 0); } 100% { height: 3em; transform: translate3d(0, 0, 0); } }设置了expand和collapse两个animation，再在transition的各个生命周期钩子中做对应的绑定，就达到了和lavalamp.js相接近的效果。
为了保证动画能执行完整，在List.vue的get方法执行完之后，还使用了一个setTimeout定时器让finish延时0.5秒变为true。
优化体验
动画效果完成之后，实际使用时发现lavalamp.js还有个巧妙地设计，就是点击Previous后，页面前往底部，反之点击Next后则前往顶部。实现后者并不复杂，在next方法中加入以下一行代码调整位置即可：
document.body.scrollTop = 0
previous前往底部则略微复杂一点，因为获取到数据之后，页面高度会发生改变，如果在previous中执行scrollTop的改变，有可能会出现新的内容填充后高度变长，页面不到底的情况。所以我watch了finish的值，仅当点击按钮为previous且finish变化为false至true时前往底部，代码如下：
watch: { finish (val, oldVal) { if (!oldVal && val && this.up) { document.body.scrollTop = document.body.scrollHeight } } }前端路由
完成以上内容之后，发现不论翻到第几页，一旦刷新，就会回到第一页。vue-router就是为解决这类问题而生的。首先我们引入VueRouter，方式可以参考上文中的“引入第三方JS库”。然后在main.js对路由规则进行一些配置。
我们的思路包括：
1.我们需要在url上反映出当前所处的页数。
2.url中的页数应该与所有组件中的page值保持一致。
3.点击Next和Previous按钮要跳转到对应的url去。
4.在这个例子中我们没有router-view。
因此main.js的配置如下：
import Vue from 'vue' import App from './App' import VueRouter from 'VueRouter' Vue.use(VueRouter) const router = new VueRouter() router.map({ '/page/:pageNum': { name: 'page', component: {} } }) router.redirect({ '/': '/page/1' }) router.beforeEach((transition) => { if (transition.to.path !== '/page/0') { transition.next() } else { transition.abort() } }) router.start(App, 'app')首先定义了一个名为page的具名路径。之后将所有目标路径为'/'，也就是初始页的请求，重定向到'/page/1'上保证一致性。最后再在每次路由执行之前做一个判断，如果到了'/page/0'这样的非法路径上，就不执行transition.next()。
根据之前的思路，在App.vue中，获取路由对象的参数值，赋值给page。同时给两个按钮添加对应的v-link。