上一篇文章講了移動(dòng)端的自適應(yīng)，那么接下來(lái)我們移動(dòng)端常見(jiàn)的上拉加載內(nèi)容是怎么寫(xiě)的呢？下面我將敘述我的一種方法。

可能大家到百度去搜上拉刷新就會(huì)出來(lái)一堆zepto，iscroll這些插件等等，一點(diǎn)進(jìn)去看就懵逼了，原來(lái)是啥呀？哥，咱總不能一直靠別人的插件生存吧。

ok，進(jìn)入正題。

首先：

咱們這個(gè)所謂的上拉刷新會(huì)用到這么幾個(gè)概念：scrollTop，scrollHeight和clientHeight。當(dāng)然還有其他的什么scrollleft等等，這些事必須爛熟于心的，如果這些都沒(méi)搞清楚的小童鞋就自己去百度吧。

那么怎么樣才能讓咱們的js知道我們當(dāng)前頁(yè)面的東西看完了要加載內(nèi)容了呢？

其實(shí)js語(yǔ)法很簡(jiǎn)單，如圖：

首先我們得到要用到的三個(gè)變量：

再來(lái)就是寫(xiě)觸發(fā)加載的條件了：

這樣咱們的觸發(fā)條件就ok了，但本人是一個(gè)強(qiáng)迫癥，人家網(wǎng)站加載都有提示呢，比如正在加載呀或者直接放一個(gè)canvas動(dòng)畫(huà)呀等等，所以咱怎么能少？不行，得弄一個(gè)

首先我的布局是這樣的：

布局效果圖：

這里我就采用了上一篇自適應(yīng)當(dāng)中說(shuō)到的流式布局，應(yīng)為只是為了做測(cè)試嘛。

ok看到最下面那個(gè)div沒(méi)？，咱們先讓他隱藏（說(shuō)到隱藏，可能大家知道還有一個(gè)屬性叫visibility，為啥不用它呢？因?yàn)関isibility雖然會(huì)讓元素隱藏，但是還是存在于dom中的，這是一個(gè)小細(xì)節(jié)，給大家提一下），然后當(dāng)觸發(fā)我們加載條件的時(shí)候讓他顯示：

鐺鐺，是不是感覺(jué)還可以呀，這里因?yàn)橹皇莻€(gè)測(cè)試demo，所以做的簡(jiǎn)單，其實(shí)用canvas畫(huà)一個(gè)加載效果是最好的。

然后觸發(fā)條件后肯定就是利用ajax拿數(shù)據(jù)然后顯示出來(lái)啦，順便再把這個(gè)loaddiv隱藏掉就ok了：

這里加timeout是為了模仿咱們從后臺(tái)取數(shù)據(jù)的一個(gè)時(shí)間延遲哈。然后因?yàn)閼械梅旁诜?wù)器上運(yùn)行，嘻嘻，就直接讓咱們的內(nèi)容高度+200，就代表內(nèi)容出來(lái)了。

到這里呢，這個(gè)上拉加載內(nèi)容就說(shuō)的差不多了，過(guò)幾天再更新一篇webapp常見(jiàn)的側(cè)滑功能吧。