快站怎么做淘客网站百度本地惠生活推广
这篇文章主要为大家详细介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，具有一定的参考价值，可以用来参考一下。
感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！
前言
简单封装了一个vue下拉加载组件，分享一下，已放到github和前端资源库，欢迎下载！
组件代码
代码如下：
加载中
import Load from '@/assets/Load.gif'
export default {
name: 'myScroll',
props: {
'onPull': { // 加载回调
type: Function,
require: true
},
'scrollState': {// 是否可滑动
type: Boolean,
require: true
},
loaded: {
type: Boolean,
default() {
return false
}
}
},
data() {
return {
Load,
timeoutId: null,
state: 0,
myScroll: null
}
},
methods: {
/*
* 加载中：1
* 加载完成：2
* 没有更多：3
*/
setState(index) { // 修改状态
this.state = index
// console.log(this.state)
},
onScroll(e) {
const _this = this
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// console.log(window.innerHeight + scrollTop, this.myScroll.offsetHeight)
if (!this.loaded && window.innerHeight + scrollTop - 50 >= this.myScroll.offsetHeight) {
clearTimeout(this.timeoutId)
_this.timeoutId = setTimeout(() => {
_this.bottomCallback()
}, 100)
}
},
bottomCallback() { // 加载回调
// console.log('回调', new Date().getTime())
if (this.state != 3) {
this.state = 1
this.onPull()
}
}
},
mounted() {
this.myScroll = this.$refs.myScroll // 获取滑条dom
}
}
.allow{
overflow:hidden;
height: auto;
}
.prohibit{
max-width: 100%;
max-height: 100%;
height: 100%;
overflow:hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: transform;
transition: all 450ms;
backface-visibility: hidden;
perspective: 1000;
}
.my-scroll{
position: relative;
color: #999;
.scroll-top{
text-align: center;
display:flex;
position:absolute;
top:0;
left:0;
width:100%;
overflow: hidden;
}
.scroll-list{
overflow:hidden;
min-height: 100%;
}
.scroll-bottom{
text-align: center;
line-height: .8rem;
div{
display:flex;
height:auto;
width:100%;
justify-content: center;
align-items:center;
flex-wrap: wrap;
i{
flex:1 0 100%;
display:block;
height: 0.4rem;
}
img{
width:0.6rem;
}
p{
flex:1 0 100%;
}
}
}
}
使用
代码如下：
import myScroll from "./components/vue-scroll.vue";
import axios from 'axios'
export default {
name: "app",
data(){
return{
scrollState: true, // 是否可以滑动
loaded: false,
iPage: 1,
listData:[],
iPageSize: 10,
}
},
methods: {
getList(){
this.$refs.myScroll.setState(1)
let _this = this
// ajax 请求
axios.get('https://easy-mock.com/mock/5b90f971ce624c454133ee2d/scoll/datalist').then(function (response) {
if (response.data.code == 200 && response.data.data.pagelist.length > 0 && !_this.loaded) {
if (_this.iPage == 1) {
_this.listData = response.data.data.pagelist
} else {
_this.listData.push(...response.data.data.pagelist)
}
_this.iPage++
_this.$refs.myScroll.setState(2)
} else {
if (_this.iPage == 1) {
_this.czListData = []
}
_this.loaded = true
_this.$refs.myScroll.setState(3)
}
})
.catch(function (error) {
console.log(error);
});
}
},
mounted () {
this.getList()
},
components: {
myScroll
}
};
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.scrolls{
font-size:.24rem;
}
.list{
height:.9rem;
line-height: .9rem;
margin-bottom:.1rem;
border-bottom:1px solid #dedede;
color:#999;
font-size:.28rem;
}
组件已放到github，欢迎下载和star
可以直接在vue项目中运行这个组件
github地址：https://github.com/confidence68/vue_mobile_scrollLoadpage
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。
注：关于如何封装了一个vue移动端下拉加载下一页数据的组件的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。
关键词：vue.js