因為我們專案中，還用了swiper。。。很多都是滑動切換的，但是又得上拉載入，所以導致，很多ui框架，我們用了，都有不同的bug出現，沒辦法，最後寫了乙個。**如下（這個因為很多地方會用，所以建議放在components/common下面）：
<template
>
<
div
class=
"loadmore"
>
<
slot
>
slot
>
<
slot
name=
"bottom"
>
slot
>
div>
template
>
<
style
>
.loadmore
style
>
<
script
>
export default
,autofill:
,distanceindex:
,bottompulltext:
,bottomdroptext:
,bottomloadingtext:
,bottomdistance:
,bottommethod:
,bottomallloaded: ,}
,data
() ;},
watch: }}
,methods:
else
this
.translate= 0;
});//
注釋if (!
this
.bottomallloaded&& !
this
.containerfilled) },
getscrolleventtarget
(element
) currentnode
= currentnode
.parentnode;}
return
window;},
//
獲取scrolltop
getscrolltop
(element)
else },
bindtouchevents
() ,
init
() }
,// autofill
屬性的實現 注釋
fillcontainer
()
else
if (
!this
.containerfilled) })
;}},
//
獲取監聽滾動元素的
scrolltop
checkbottomreached
()
else },
// ontouchstart
事件handletouchstart
(event) }
,// ontouchmove
事件handletouchmove
(event
) //
實時的clienty
位置this
.currenty=
event
.touches[0].
clienty;
// distance
移動位置和開始位置的差值
distanceindex---
let
distance = (
this
.currenty-
this
.starty)
/ this
.distanceindex;
// 根據
distance
判斷滑動的方向 並賦予變數
direction down---
向下互動；
up---
向上滑動
this
.direction=
distance
>
0 ?
'down'
: 'up'
;if
(this
.direction===
'up'
) if
(typeof this
.bottommethod===
'function'
&& this
.direction===
'up'
&&this
.bottomreached&&
this
.bottomstatus!==
'loading'
&& !
this
.bottomallloaded)
else
if (
this
.translate> 0)
this
.bottomstatus= -
this
.translate>=
this
.bottomdistance?
'drop'
: 'pull';}
},// ontouchend
事件handletouchend
()
else
}this
.direction= '';
}},mounted
() }
;script
>
然後哪個頁面需要，在哪個頁面匯入即可：import loadmore from './../common/loadmore.vue';在需要引入他的頁面寫法如下：
<template>
<
section
class=
"finan"
>
<
load
-more
:bottom-method
="loadbottom"
:bottom-all-loaded
="allloaded"
:bottompulltext=
'bottomtext'
:auto-fill
="false"
@bottom-status-change
="handlebottomchange"
ref=
"loadmore"
>
<
div>
這裡寫你需要的另外的模組
div>
<
div
v-show=
"loading"
slot=
"bottom"
class=
"loading"
> 這個div是為讓上拉載入的時候顯示一張載入的gif圖
<
img
src=
"./../../assets/main/uploading.gif"
>
div>
load
-more
>
section
>
template>
然後在此頁面的data裡和methods設定如下：
export default
,data
() }
,methods: ,
loadbottom
: function
() api
.commonapi
(後台介面，請求引數
) 這個api是封裝的axios有不懂的可以看vue2+vuex+axios那篇文章
.then
(res=> )}
, 1000)}
);},
handlebottomchange
(status)
,}
這樣就完成了萬惡的上拉載入= =。。。
vue2實現懶載入
參考 五 配置非同步元件實現懶載入的問題分析 1 多次進出同乙個非同步載入頁面是否會造成多次載入元件？答 否，首次需要用到元件時瀏覽器會傳送請求載入元件，載入完將會快取起來，以供之後再次用到該元件時呼叫 2 在多個地方使用同乙個非同步元件時是否造成多次載入元件？如 a頁面 exportdefault...
vue上拉載入更多元件
很久沒發布文章了，但其實一直在學習寫元件，本來想寫個跑馬燈元件，但是因為css動畫會出現卡頓，就算開啟gpu加速還是會，暫時還沒有什麼好的解決方法，所以有解決方法的歡迎指點一下。我想，工作一段時間的都碰見過上拉載入更多需求，現在這種外掛程式也蠻多的，也很多是把上拉載入下拉重新整理結合。但是這些元件都...
基於 vue2 導航欄透明漸變
做法為 1 首先給要滾動變化的導航新增 style style fixed title 個人中心 style style slot left class news box overflow visible class iconfont news icon class news num 4 slot ...