项目需求：koa2+vue+axios+better-scroll+json,其中vue+axios+better-scroll我采用的都是脚本引入，json数据模仿数据库。
better-scroll平滑滚动框架，又叫better-scroll滑动库。
其实就像uni-app的scroll-view组件
官网：https://github.com/ustbhuangyi/better-scroll/blob/master/README_zh-CN.md
这里我们就不使用npm安装了，直接使用脚本的形式引入资源。
复制cdn的网址到浏览器打开，然后全选复制，到自己项目中创建一个js文件命名为better-scroll.js保存下来。
案例效果
下拉刷新的实现
上拉加载更多的实现
上拉触底（没有更多数据了）
页面初始加载
实现代码逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./stylesheets/style.css" />
<script src="./javascripts/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascripts/better-scroll.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header id="sports-header">
90Sports | 体育
</header>
<div id="loadingDown"></div>
<main id="sports-main">
<div>
<ul class="sports-list">
<li v-for="item in SportsList" :key="item.id">
<div class="sports-list-text">
<p>
{{ item.title }}
</p>
<p>
<span>{{ item.comment }}评</span>
</p>
</div>
<div class="sports-list-img">
<img :src="item.image" alt="">
</div>
</li>
</ul>
<div id="loadingUp"></div>
</div>
<div id="loading" style="font-size: 20px;color: #537BFF;"></div>
</main>
<script type="text/javascript">
const app = new Vue({
data() {
return {
SportsList: []
}
},
mounted() {
this.getMsg()
},
methods: {
getMsg: function() {
/*
方法1：使用传统的ajax发起请求的写法
const xhr = new XMLHttpRequest()
let that = this
xhr.onload = function() {
if (xhr.status == 200) { //判断状态码
//console.log(xhr.responseText
let data = JSON.parse(xhr.responseText) //用data接收服务器响应回来的json数据
if (data.errCode == 0) { //判断证明一下是不是ok状态
console.log(data.sportsList)
that.SportsList = data.sportsList
console.log(that.SportsList)
}
}
}
xhr.open('POST', '/sportsList', true) //发送POST请求，请求URL,开启异步加载
xhr.setRequestHeader('Content-Type', 'application/json') //设置请求头信息,json何使
xhr.send(JSON.stringify({
"page": 0,
"count": 10
})) //转义json数据
*/
//方法2：使用axios发起请求
axios.post('/sportsList', {
page: 0,
count: 10
}).then(res => {
console.log(res)
if (res.data.errCode == 0) { //判断证明一下是不是ok状态
//console.log(res.data)
//初始化完成后
loading.innerHTML = 'loading...'
setTimeout(() => {
this.SportsList = res.data.sportsList
this.initBetterScroll(); //数据回来的时候调用initBetterScroll，用来初始化操作
}, 1000)
}
})
},
//页面初始化
initBetterScroll() {
let page = 0 //控制页码
let loadingDown = document.getElementById('loadingDown')
let loadingUp = document.getElementById('loadingUp')
let loading = document.getElementById('loading')
let container = document.getElementById("sports-main") //获取容器
loading.innerHTML = ''
let bs = BetterScroll.createBScroll(container, { //创建一个BetterScroll实例，然后可以调用该实例下的方法
pullDownRefresh: { //下拉功能
threshold: 30 //临界点,单位px
},
//上拉加载
pullUpLoad: {
threshold: -10
}
})
//触发下拉临界点事件pullingDown
bs.on('pullingDown', () => {
console.log('下拉')
loadingDown.innerHTML = 'loading...' //下拉前显示
axios.post('/sportsList', {
page: 0,
count: 10
}).then(res => {
if (res.data.errCode == 0) {
//延迟1秒后完成下拉刷新
setTimeout(() => {
this.SportsList = res.data.sportsList
loadingDown.innerHTML = '刷新成功' //下拉完成后显示
bs.finishPullDown();
bs.refresh(); //重新刷新一下页面
num = 0
}, 1000)
}
})
});
//触发上拉临界点事件pullingUp
bs.on('pullingUp', () => {
console.log('上拉')
loadingUp.innerHTML = 'loading...'
axios.post('/sportsList', {
page: ++page, //累加，下拉一页
count: 10
}).then(res => {
if (res.data.errCode == 0) {
//延迟1秒后完成下拉刷新
setTimeout(() => {
this.SportsList = [...this.SportsList, ...res.data.sportsList] //上拉的时候加载1页数据
if (res.data.sportsList.length<10) {
loadingUp.innerHTML = '已经没有更多数据了'
} else {
loadingUp.innerHTML = '刷新成功'
}
bs.finishPullUp();
bs.refresh(); //重新刷新一下页面
}, 1000)
}
})
})
//触发滚动瞬间的事件scrollStart
bs.on('scrollStart', () => {
console.log('滚动')
loadingDown.innerHTML = '下拉刷新' //下拉过程中显示
loadingUp.innerHTML = '上拉加载'
})
}
}
}).$mount('#sports-main')
</script>
</body>
</html>
完整案例项目：https://gitee.com/qin-fubin/demo-collect/tree/sportProject/
网友评论