項目是從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> 上面代碼很清晰, 其實 '拼命加載中...' 一直都在電影列表下面,所以當我拉到底部的時候,就會看到 '拼命加載中...' , 所以我只需要更新電影列表數據即可。看起來就變成,當我拉到最底下時候出現 '拼命加載中...' ,同時電影更新, 這個小技巧給贊。 |