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最后修改以下：