小程式之豆瓣電影原始碼解讀

小小小發表於2017-01-20
原始碼

專案是從github上面下載的，因為本人覺得專案做得非常棒，含括了一些巧妙的解決思路，所以寫一篇文章，將其原始碼精髓部分，抽出來給大家講講~~

先看專案效果：

小程式之豆瓣電影原始碼解讀
首頁效果

一、loading載入和自定義上拉重新整理

1）loading載入效果：

小程式之豆瓣電影原始碼解讀

細心同學可能發現，熱映、待映、口碑等tab頁面都有loading載入特效，那麼對於這麼一個共用的特效，作者是如何處理的呢。

公共元件component目錄下的filmList下面：

<template>
    <block wx:if="{{showLoading}}">
        <view class="loading">玩命載入中…</view>
    </block>
</template>複製程式碼

A頁面如何引用：

<import src="../../component/filmList/filmList.wxml"/>複製程式碼

B頁面如何引用：

<import src="../../component/filmList/filmList.wxml"/>複製程式碼

所以不管A頁面還是B頁面，都可以引用自定義loading特效。

2）自定義上拉重新整理特效：

小程式之豆瓣電影原始碼解讀

如圖，上拉到底的時候，出現 '拼命載入中...'，然後載入更多電影，其實原理很簡單，就是在page中的上拉重新整理事件onReachBottom中重新整理電影列表資料即可。

電影列表wxml程式碼：

<block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film">
    ...  //電影列表
</block>
<block wx:if="{{hasMore}}">
    <view class="loading-tip">拼命載入中…</view>
</block>複製程式碼

上面程式碼很清晰, 其實 '拼命載入中...' 一直都在電影列表下面，所以當我拉到底部的時候，就會看到 '拼命載入中...' , 所以我只需要更新電影列表資料即可。看起來就變成，當我拉到最底下時候出現 '拼命載入中...' ，同時電影更新, 這個小技巧給贊。


原始碼下載

『 咻咻咻咻duang，是不是又忘了關注 →_→』

相關文章