9.【nuxt起步】-scroll分页加载

面是单页，下面实现一个列表页和分页加载的例子

1.新建pages/list.vue

<template>
　　<div>
　　　　分页加载列表页面
　　</div>
</template>
<script>
export default {
}
</script>

2.我们从footer的首页改成更多，然后从footer的更多跳转到list.vue，修改footer如下

<nuxt-link :to="'/list'" id="go-home" style="width: 50%;">
　　<i class="iconfont icon-home"></i>
　　<span>更多</span>
</nuxt-link>

3.新建 /component/scrollpage.vue，网上找的一个开源的scrollpage.具体参看源码

4.新建 /component/less/scroll.less

5.新建 /component/img/down-logo.png,refresh-logo.gif

Cnpm install less 运行报错了，看下list.vue的源码

<template>
<div></div>
<!--
<my-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData" >
</my-scroll>
-->
</template>
<script>
import MyScroll from '~/components/ScrollPage.vue'
import axios from 'axios';
export default {
　　async asyncData({
　　　　app
　　}){
　　　　let res =await axios({
　　　　headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
　　　　method: 'get',
　　　　url: `http://test.yms.cn/testjson.asp`,
　　　　data: ''
　　　　})
　　　　return{
　　　　　　tdInfo:res.data
　　　　}
},
data(){
　　return{
　　tdList:[],
　　scrollData:{
　　noFlag: false //暂无更多数据显示
　　}
　　}
},
method:{
/*
onRefresh(done){
done();
},
onInfinite(done){
done();
}
*/
}
}
</script>

再看看浏览器报错的信息

6.这个就是跨域的问题，我们需要用到nuxt-proxy，可以先了解下这个东东

Cnpm install @nuxtjs/proxy --save 

7.修改nuxt.confg.js

modules:[

　　'@nuxtjs/axios',

　　'@nuxtjs/proxy'

],

axios:{

　　prefix:'/api/',

　　proxy:true

},

proxy:{

　　'/api':

　　{

　　　　target:'http://test.yms.cn',

　　　　pathRewrite:{'^/api':'/'}

　　}

},

8.List.vue修改如下

async asyncData({

　　app

　　}){

　　　　let res =await axios({

　　　　headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

　　　　method: 'get',

　　　　url: `http://localhost:3000/api/testjson.asp?act=list`,

　　　　data: ''

　　　　})

　　return{

　　　　tdList:res.data

　　}

},

9.刷新 OK了，list.vue最后修改如下：