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

最新推荐文章于 2024-08-26 21:41:10 发布

barnett_y

最新推荐文章于 2024-08-26 21:41:10 发布

阅读量3.5k

点赞数

分类专栏：【微信小程序2点滴知识】

【微信小程序2点滴知识】专栏收录该内容

132 篇文章 8 订阅

订阅专栏

项目是从github上面下载的，因为本人觉得项目做得非常棒，含括了一些巧妙的解决思路，所以写一篇文章，将其源码精髓部分，抽出来给大家讲讲~~

先看项目效果：

首页效果

一、loading加载和自定义上拉刷新

1）loading加载效果：

细心同学可能发现，热映、待映、口碑等tab页面都有loading加载特效，那么对于这么一个共用的特效，作者是如何处理的呢。

公共组件component目录下的filmList下面：

 
   1. 
   <template> 
  
   2. 
   <block wx:if="{{showLoading}}"> 
  
   3. 
   <view class="loading">玩命加载中…</view> 
  
   4. 
   </block> 
  
   5. 
   </template>

A页面如何引用：

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

B页面如何引用：

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

所以不管A页面还是B页面，都可以引用自定义loading特效。

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

如图，上拉到底的时候，出现 '拼命加载中...'，然后加载更多电影，其实原理很简单，就是在page中的上拉刷新事件onReachBottom中刷新电影列表数据即可。

电影列表wxml代码：

 
   1. 
   <block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film"> 
  
   2. 
   ...  //电影列表 
  
   3. 
   </block> 
  
   4. 
   <block wx:if="{{hasMore}}"> 
  
   5. 
   <view class="loading-tip">拼命加载中…</view> 
  
   6. 
   </block>