官网: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
};
});