宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-12-12

这个项目是从github下载的,因为我觉得这个项目很好,包括一些巧妙的解决方案,所以我写了一篇文章,并提取了它的源代码的精华告诉大家~ ~

先看项目效果:

小程序之豆瓣电影源码解读(图1)

主页效果

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

1)加载效果:

小程序之豆瓣电影源码解读(图2)

细心的同学可能会发现,标签页如热门秀、待定秀、口碑等。都有加载加载特效,那么作者是如何处理这样常见的特效呢?

在公共组件目录的filmList下:

模板Wx : if=“{ { show loading } }”视图类=“loading”./…/查看/阻止/模板一个页面如何引用:

导入src='././component/film list/film list . wxml '/b页面如何引用:

导入='././component/film list/film list . wxml '/因此,无论是A页还是B页,都可以参考自定义加载效果。

2)自定义上拉刷新效果:

小程序之豆瓣电影源码解读(图3)

如图,当拉起到最后,‘拼命装……’出现,然后加载更多影片。其实原理很简单,就是可以在页面的每一个底部的上拉刷新事件中刷新电影列表数据。

列出wxml代码:

block wx : for=' { films } } ' wx : for-index=' film index ' wx 3360 for-item=' film item ' wx 3360 key=' film './/电影列表/blockblockwx 3360 if=' { hasmore } View class=' loading-tip '拼命加载./上面的代码……/视图/块非常清晰。实际上,‘拼命装’.总是在电影列表下面,所以当我把它拉到底部时,我会看到“拼命加载”.所以我只需要更新电影列表数据。当我拉到底时,它看起来像是在拼命装货.出现,同时,电影被更新。这个小把戏值得称赞。

更多资讯
游戏推荐
更多+