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