這次帶給大家vue2.0行動端做出下拉刷新與上拉加載功能,vue2.0移動端做出下拉刷新與上拉加載功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
直接上程式碼,不懂的多看幾遍,下面我換會告訴大家如何使用。
<template> <p> <section> <header> <slot> <span>下拉更新</span> <span>松开更新</span> <span>更新中</span> </slot> </header> <slot></slot> <footer> <slot> <span>加载中……</span> </slot> </footer> </section> </p> </template> <script> export default { props: { offset: { type: Number, default: 40 }, enableInfinite: { type: Boolean, default: true }, enableRefresh: { type: Boolean, default: true }, onRefresh: { type: Function, default: undefined, required: false }, onInfinite: { type: Function, default: undefined, require: false } }, data() { return { top: 0, state: 0, startY: 0, touching: false, infiniteLoading: false } }, methods: { touchStart(e) { this.startY = e.targetTouches[0].pageY this.startScroll = this.$el.scrollTop || 0 this.touching = true }, touchMove(e) { if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) { return } let diff = e.targetTouches[0].pageY - this.startY - this.startScroll if (diff > 0) e.preventDefault() this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0) if (this.state === 2) { // in refreshing return } if (this.top >= this.offset) { this.state = 1 } else { this.state = 0 } }, touchEnd(e) { if (!this.enableRefresh) return this.touching = false if (this.state === 2) { // in refreshing this.state = 2 this.top = this.offset return } if (this.top >= this.offset) { // do refresh this.refresh() } else { // cancel refresh this.state = 0 this.top = 0 } }, refresh() { this.state = 2 this.top = this.offset this.onRefresh(this.refreshDone) }, refreshDone() { this.state = 0 this.top = 0 }, infinite() { this.infiniteLoading = true this.onInfinite(this.infiniteDone) }, infiniteDone() { this.infiniteLoading = false }, onScroll(e) { if (!this.enableInfinite || this.infiniteLoading) { return } let outerHeight = this.$el.clientHeight let innerHeight = this.$el.querySelector('.inner').clientHeight let scrollTop = this.$el.scrollTop let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0 let infiniteHeight = this.$el.querySelector('.load-more').clientHeight let bottom = innerHeight - outerHeight - scrollTop - ptrHeight if (bottom < infiniteHeight) this.infinite() } } } </script> <style> .yo-scroll { position: absolute; top: 2.5rem; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; background-color: #ddd } .yo-scroll .inner { position: absolute; top: -2rem; width: 100%; transition-duration: 300ms; } .yo-scroll .pull-refresh { position: relative; left: 0; top: 0; width: 100%; height: 2rem; display: flex; align-items: center; justify-content: center; } .yo-scroll.touch .inner { transition-duration: 0ms; } .yo-scroll.down .down-tip { display: block; } .yo-scroll.up .up-tip { display: block; } .yo-scroll.refresh .refresh-tip { display: block; } .yo-scroll .down-tip, .yo-scroll .refresh-tip, .yo-scroll .up-tip { display: none; } .yo-scroll .load-more { height: 3rem; display: flex; align-items: center; justify-content: center; } </style>
把上面元件拷貝一下,存成後綴是.vue的元件放到你的component下, 然後引入到頁面, 下面是我引用的demo
上程式碼:裡面有註解哦,有問題給我留言!
<template> <p> <v-scroll> <ul> <li>{{item.name}}</li> <li>{{item.name}}</li> </ul> </v-scroll> </p> </template> <script> import Scroll from './y-scroll/scroll'; export default{ data () { return { counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载 num : 15, // 一次显示多少条 pageStart : 0, // 开始页数 pageEnd : 0, // 结束页数 listdata: [], // 下拉更新数据存放数组 downdata: [] // 上拉更多的数据存放数组 } }, mounted : function(){ this.getList(); }, methods: { getList(){ let vm = this; vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => { vm.listdata = response.data.slice(0,15); }, (response) => { console.log('error'); }); }, onRefresh(done) { this.getList(); done() // call done }, onInfinite(done) { let vm = this; vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => { vm.counter++; vm.pageEnd = vm.num * vm.counter; vm.pageStart = vm.pageEnd - vm.num; let arr = response.data; let i = vm.pageStart; let end = vm.pageEnd; for(; i<end; i++){ let obj ={}; obj["name"] = arr[i].name; vm.downdata.push(obj); if((i + 1) >= response.data.length){ this.$el.querySelector('.load-more').style.display = 'none'; return; } } done() // call done }, (response) => { console.log('error'); }); } }, components : { 'v-scroll': Scroll } } </script>
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是vue2.0行動端做出下拉式刷新與上拉載入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SublimeText3漢化版
中文版,非常好用

Dreamweaver Mac版
視覺化網頁開發工具

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器