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

  • 相关阅读:
    算法基础<七> 加权有向图
    union 分页/group/join 复杂查询(.net core/framework)
    扩展Elasticsearch客户端简化ES查询(.net core/framework)
    对EF Core进行扩展使支持批量操作/复杂查询
    Grpc对象转proto代码工具
    扩展ADO.net实现对象化CRUD(.net core/framework)
    Sublime Text 4 破解笔记
    python三元表达式(三目运算符)的坑
    xaf-常见问题解答
    xaf.blazor中如何开启诊断按钮
  • 原文地址:https://www.cnblogs.com/kobewang/p/10044204.html
Copyright © 2020-2023  润新知