如何封装了一个vue移动端下拉加载下一页数据的组件
程序员文章站
2022-04-28 10:49:03
前言
简单封装了一个vue下拉加载组件，分享一下，已放到github和前端资源库，欢迎下载！
组件代码
<...
前言
简单封装了一个vue下拉加载组件，分享一下，已放到github和前端资源库，欢迎下载！
组件代码
<template>
<div class="my-scroll" :class="[scrollstate?'prohibit':'allow']" ref="myscroll" @scroll.passive="onscroll($event)" @touchmove="onscroll($event)" >
<!-- top -->
<div class="scroll-list">
<slot name='scrolllist'></slot>
<div class="scroll-bottom">
<div v-if="state==1">
<i><img :src="load"/></i>
<p>加载中</p>
</div>
<div v-if="state==2">加载完成</div>
<div v-if="state==3">没有数据了</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
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
}
}
</script>
<style lang="scss" scoped>
.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%;
}
}
}
}
</style>
使用
<template>
<div id="app">
<my-scroll class="scrolls" ref="myscroll" :on-pull="getlist" :loaded="loaded" :scroll-state="scrollstate">
<div slot="scrolllist">
<div class="list" v-for="(item,index) in listdata" :key="index">{{item.name}}</div>
</div>
</my-scroll>
</div>
</template>
<script>
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
}
};
</script>
<style scoped>
#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;
}
</style>
组件已放到github，欢迎下载和star
可以直接在vue项目中运行这个组件
github地址：https://github.com/confidence68/vue_mobile_scrollloadpage
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 企业网站优化排名技巧分享
下一篇： SEO优化别忘了分析竞争对手