欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 小程序之豆瓣电影源码解读

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

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

发布时间:2020-11-11  

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

先看项目效果:

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

首页效果 一、loading加载和自定义上拉刷新

1)loading加载效果:

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

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

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

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

A页面如何引用:

<import src=http://www.yiyongtong.com/archives/"../../component/filmList/filmList.wxml"/>

B页面如何引用:

<import src=http://www.yiyongtong.com/archives/"../../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>

上面代码很清晰, 其实 '拼命加载中...' 一直都在电影列表下面,所以当我拉到底部的时候,就会看到 '拼命加载中...' , 所以我只需要更新电影列表数据即可。看起来就变成,当我拉到最底下时候出现 '拼命加载中...' ,同时电影更新, 这个小技巧给赞。