小編給大家分享一下怎么封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,新鄉(xiāng)縣企業(yè)網(wǎng)站建設,新鄉(xiāng)縣品牌網(wǎng)站建設,網(wǎng)站定制,新鄉(xiāng)縣網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,新鄉(xiāng)縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
組件代碼
<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">沒有數(shù)據(jù)了</div> </div> </div> </div> </template> <script type="text/javascript"> import Load from '@/assets/Load.gif' export default { name: 'myScroll', props: { 'onPull': { // 加載回調(diào) 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) { // 修改狀態(tài) 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() { // 加載回調(diào) // console.log('回調(diào)', 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>
看完了這篇文章,相信你對“怎么封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
文章標題:怎么封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
本文網(wǎng)址:http://muchs.cn/article42/gedoec.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信小程序、品牌網(wǎng)站設計、商城網(wǎng)站、小程序開發(fā)、網(wǎng)站策劃、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)