网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

小程序之豆瓣電影源碼解讀

發布時間:2018-04-25 08:52 所屬欄目:小程序開發教程

項目是從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>

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



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23945.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×