項(xiàng)目是從github上面下載的，因?yàn)楸救擞X(jué)得項(xiàng)目做得非常棒，含括了一些巧妙的解決思路，所以寫一篇文章，將其源碼精髓部分，抽出來(lái)給大家講講~~

先看項(xiàng)目效果：

一、loading加載和自定義上拉刷新

1）loading加載效果：

細(xì)心同學(xué)可能發(fā)現(xiàn)，熱映、待映、口碑等tab頁(yè)面都有l(wèi)oading加載特效，那么對(duì)于這么一個(gè)共用的特效，作者是如何處理的呢。

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

<template>
    <block wx:if="{{showLoading}}">
        <view class="loading">玩命加載中…</view>
    </block>
</template>

A頁(yè)面如何引用：

<import src="../../component/filmList/filmList.wxml"/>

B頁(yè)面如何引用：

<import src="../../component/filmList/filmList.wxml"/>

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

2）自定義上拉刷新特效：

如圖，上拉到底的時(shí)候，出現(xiàn) '拼命加載中...'，然后加載更多電影，其實(shí)原理很簡(jiǎn)單，就是在page中的上拉刷新事件onReachBottom中刷新電影列表數(shù)據(jù)即可。

電影列表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>

上面代碼很清晰, 其實(shí) '拼命加載中...' 一直都在電影列表下面，所以當(dāng)我拉到底部的時(shí)候，就會(huì)看到 '拼命加載中...' , 所以我只需要更新電影列表數(shù)據(jù)即可?？雌饋?lái)就變成，當(dāng)我拉到最底下時(shí)候出現(xiàn) '拼命加載中...' ，同時(shí)電影更新, 這個(gè)小技巧給贊。