封裝了一個vue移動端下拉載入下一頁資料的元件
摘要：
前言
簡單封裝了一個vue下拉載入元件，分享一下，已放到github和前端資源庫，歡迎下載！
元件程式碼
<template>
<div class="my-scroll" :class="[scrollState?'pro...
前言
簡單封裝了一個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地址：ofollow,noindex" target="_blank">https://github.com/confidence68/vue_mobile_scrollLoadpage