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

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最后修改如下:

9.【nuxt起步】-scroll分页加载的更多相关文章

  1. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

  2. Android基本控件之listView(三)<用ListView实现分页加载>

    我们之前讨论了ListView的基本使用方法和ListView的优化 今天我们再来讨论一个关于ListView的一个新的东西~就是分页加载.那么什么是分页加载呢?简单点说,就是"下拉刷新&q ...

  3. Android ListView分页加载时图片显示问题

    场景:Android ListView需要分页加载,每个item中会有图片,图片又是从网络下载的. 问题:在滑动加载下一页时,上一页的图片明明已经下载完成了,但是无法显示出来. Bug重现: 1,加载 ...

  4. Android中ListView分页加载数据

    public class MainActivity extends Activity { private ListView listView=null; //listview的数据填充器 privat ...

  5. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  6. 【Android进阶】Listview分页加载数据的实现

    Listview分页加载数据的实现 public class MainActivity extends Activity { protected static final int SUCCESS_GE ...

  7. Jetpack 架构组件 Paging 分页加载 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  9. ListView实现分页加载(三)实现分页加载

    在上一篇中,我们实现了底部布局(即带上了进度条).没有读过的朋友可以点击下面的链接: http://www.cnblogs.com/fuly550871915/p/4866966.html 但是进度条 ...

随机推荐

  1. Makefile基础(三)

    第一章:C语言之Makefile基础(一) 第二章:C语言之Makefile基础(二) 再来看一个简单的例子: [root@localhost linux_c]# cat Makefile foo = ...

  2. session的工作原理、django的超时时间设置及session过期判断

    1.session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 session服务端中存在的数据为: session = { 随机字符串1:{ 用户1的相关信 ...

  3. php 审批流程管理

    1.流程管理的用法是什么样的? 2.怎么发起想要的流程? 3.审批的人要是怎么审批通过? 4.流程审核是不是要挨个走过? 一.要有数据库的内容的 肯定会有表的,首先就是用户表了,然后就是流程表,用户编 ...

  4. javascript学习笔记 - 引用类型 Array

    二 Array 1.可以通过length属性删除或创建新的数组项 arr = [1,2,3]; arr.length = 4;//增加 [1,2,3,undefined] arr.length = 2 ...

  5. .net SignalR 聊天室

    代码地址:https://gitee.com/srnsrn/netSignalr.git 运行项目打开多个页面 私密聊天

  6. 九度oj 题目1085:求root(N, k) 清华2010年机试题目

    题目描述: N<k时,root(N,k) = N,否则,root(N,k) = root(N',k).N'为N的k进制表示的各位数字之和.输入x,y,k,输出root(x^y,k)的值 (这里^ ...

  7. 【转】hibernate映射(单向双向的一对多、多对一以及一对一、多对一)

    多对一关联映射:在多的一端加入一个外键指向一的一端,它维护的关系是多指向一 一对多关联映射:在多的一端加入一个外键指向一的一端,它维护的关系是一指向多 也就是说一对多和多对一的映射策略是一样的,只是站 ...

  8. bzoj 1137 [POI2009]Wsp 岛屿

    题目大意 Byteotia岛屿是一个凸多边形.城市全都在海岸上.按顺时针编号1到n.任意两个城市之间都有一条笔直的道路相连.道路相交处可以自由穿行.有一些道路被游击队控制了,不能走,但是可以经过这条道 ...

  9. CodeForces 333E. Summer Earnings

    time limit per test 9 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. batch.bat explaination

    1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on|off}] [message] Sample篅echo of ...