初学前端在小程序中使用for循环的一个优化案例

最新推荐文章于 2022-08-12 16:41:04 发布

zxclclciop

最新推荐文章于 2022-08-12 16:41:04 发布

阅读量598

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/zxclclciop/article/details/108094549

版权

本文介绍了一个前端新手在微信小程序中优化for循环使用案例，针对从API获取的官方榜单数据，如何避免空数据占用布局并实现动态适应。通过在JS中判断数据，创建两个新数组分别存放不同类型的榜单数据，实现更严谨的逻辑和自动更新效果。

摘要由CSDN通过智能技术生成

作为前端的小白，已经学习了个把月了，for循环在微信小程序中的使用在常见不过了；在获取某个官方API数据后，如何将获取的若干条数据分别不重复的放入到不同的循环当中呢？让我们看个小小的例子去体会一波。

原界面分析

界面分析

首先我们来看一下网易云音乐其中的一个界面：

这个界面其实相对来讲时比较好做的，主要就是分为两大块内容，先说中间这块-->官方榜单：左边对应的时榜单的图片，右边则是这个榜单内的歌曲，然后每行的样式都是一样的，使用for循环遍历去做会特别简便。然后我们再看其他的一些榜单区的内容：都是一行分布3个为上方图片加下方文字的样式，这个也可以用到循环来实现。

数据分析

这里分享一下API链接：http://neteasecloudmusicapi.zhaoboy.com/toplist/detail(如何调用API想必大家也会使用，或者也从其他的大佬的文章中学习过)

然后我们来看到获取到的数据并进行分析：

从第一张图片我们可以知道list下获取到若干条信息，每条信息中的updateFrequency对应该榜单更新时间，coverImgUrl对应该榜单的图片，还有一项是tracks也是我们需要用到（看下张图）

可以看到tracks中包含的信息就是歌单了，也就是我们官方榜单中需要用到的数据

从第三章图可以看到，从编号为4开始tracks中的信息就为空了，也就是刚才给大家展示的原界面中只有官方榜单需要这项信息，其他的榜单是不需要的。所以循环出的若干条数据中，我们需要将前4条放进官方榜单，而后面其他的数据放进其他的榜单当中，for循环下我们会将所有拿到的数据都循环出来，并且样式还是一样的。而这个界面则是在同一数据下，分别用循环放到两个不同的样式当中，大家肯定都想得到，加个if判断就好了，接下来，让我们看看如何实现。

代码实现

wxml

<view class="body-view">
    <loading hidden="{
  {hidden}}">
        加载中...
    </loading>
</view>
<view class="wrapper">
    <!-- 上部分：榜单推荐容器 -->
    <view class="ranking">
        <text class="ranking-name">榜单推荐</text>
        <view class="rankingbox">
            <view  class="rankinglist" wx:for&#