axios实现上拉下拉演示

  

 

官网：https://better-scroll.github.io/docs/zn-CN

 1、准备工作

• koa2搭建后端环境并启动项目：Ajax+koa2简单介绍_lq_1999的博客-CSDN博客
• 在项目中安装axios以便于后端（router）引用

在终端输入 npm i -S axios

2、html头部引用前端模板

    <script src="javascripts/template-web.js"></script>

    <script src="javascripts/axios.js"></script>

    <script src="javascripts/better-scroll.js"></script>

3、 css样式、前端DOM元素及模板 

Ajax+koa2简单实例演示_lq_1999的博客-CSDN博客

4、js

<script>
        var sportsList = document.querySelector('.sports-list');
        var sports_main = document.querySelector('#sports-main');
        var loadingDown = document.querySelector('#loadingDown');
        var loadingUp = document.querySelector('#loadingUp');
        var nowPage = 0;//目前的页数（从0开始）
        var loading = document.querySelector('#loading');
        
        // betterscroll 滚动原理，前提是保证容器高度小于列表 
        initList();
        function initList() {
            loading.innerHTML = 'loading...'
            axios.post('list',{
                page : 0,
                count : 8 
            }).then((res)=> {
                if(res.data.errcode === 0) {
                    setTimeout(()=>{
                        loading.innerHTML = ''
                        sportsList.innerHTML = template('tpl-sportsList',res.data);
                        initBetterScroll();
                    },500)
                }
            })
        };
        
        function initBetterScroll(){
            let bs = BetterScroll.createBScroll(sports_main,{
                pullDownRefresh : {
                    threshold : 30      //触发的界限
                },
                pullUpLoad : {
                    threshold : -20     //触发的界限
                }
            })

            //页面开始上拉或下拉 且没有达到触发条件时
            bs.on('scrollStart',()=>{
                loadingDown.innerHTML = '下拉刷新';
                loadingUp.innerHTML = '上拉加载';
            });

            bs.on('pullingDown',()=>{
                loadingDown.innerHTML = 'loading...';
                
                axios.post('/list',{        //post方式向后端传递参数（页面序号及数据条数）
                    page : 0,
                    count : 8
                }).then((res)=>{
                    if(res.data.errcode === 0) {
                        setTimeout(()=>{
                        //在模板导入数据，将模板插入DOM中
                            sportsList.innerHTML = template('tpl-sportsList',res.data);
                            if(res.data.list.length){
                                loadingDown.innerHTML = '刷新成功';
                            }else{
                                loadingDown.innerHTML = '到顶了';
                            }
                            bs.finishPullDown();    //完成下拉
                            bs.refresh();       //刷新列表
                            nowPage = 0; //刷新回到首页
                        },500);  
                    }
                });
            });

            bs.on('pullingUp',() => {
                loadingUp.innerHTML = 'loading...';
                axios.post('/list',{         //post方式向后端传递参数（页面序号及数据条数）
                    page : ++nowPage,        //上拉操作，页面序号自增1
                    count : 8
                }).then((res)=>{
                    if(res.data.errcode === 0) {
                        setTimeout(()=>{
                            sportsList.innerHTML += template('tpl-sportsList',res.data);
                            if(res.data.list.length){
                                loadingUp.innerHTML = '加载成功';
                            }else{
                                loadingUp.innerHTML = '没有更多内容了';
                            }
                            bs.finishPullUp();    //完成上拉加载
                            bs.refresh();
                        },500);  
                    }
                })
            });
        }
    </script>

5、 后端/router

在头部引用

const router = require('koa-router')()
const fs = require('fs'); //内置方法，在下方用来引入JSON文件
const axios = require('axios')

 post方式

router.post('/list', async (ctx, next) => {

  // 参数类型设置
  var args = [
    { field: 'page',type: 'number' },
    { field: 'count',type: 'number' }
  ];

  // 接收到的数据
  const body = ctx.request.body;

  for (let i = 0; i < args.length; i++) {
    let items = args[i];

    // 参数个数错误
    if (!Object.keys(body).includes(items.field)) {
      ctx.body = {
        errcode: -1,
        errmsg: '参数个数错误'
      };
      return;
    } else {
      if (typeof body[items.field] !== items.type) {
        ctx.body = {
          errcode: -2,
          errmsg: '参数类型错误'
        };
        return;
      };
    }
  };

  let data = fs.readFileSync('./data/sports.json'); //引入JSON文件

  data = JSON.parse(data);        //以对象的形式返回JSON

  let list = data.splice(body.page * body.count, body.count)    //需要响应的数据

  ctx.body = {
    errcode: 0,
    errmsg: 'ok',
    list
  };

});