小程序之豆瓣电影源码解读

项目是从github上面下载的，由于本人以为项目作得很是棒，含括了一些巧妙的解决思路，因此写一篇文章，将其源码精髓部分，抽出来给你们讲讲~~

先看项目效果：

首页效果

1、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，是否是又忘了关注 →_→』