作為前端的小白，已經(jīng)學(xué)習(xí)了個(gè)把月了，for循環(huán)在微信小程序中的使用在常見不過了；在獲取某個(gè)官方API數(shù)據(jù)后，如何將獲取的若干條數(shù)據(jù)分別不重復(fù)的放入到不同的循環(huán)當(dāng)中呢？讓我們看個(gè)小小的例子去體會(huì)一波。

原界面分析

界面分析

首先我們來看一下網(wǎng)易云音樂其中的一個(gè)界面：

這個(gè)界面其實(shí)相對來講時(shí)比較好做的，主要就是分為兩大塊內(nèi)容，先說中間這塊-->官方榜單：左邊對應(yīng)的時(shí)榜單的圖片，右邊則是這個(gè)榜單內(nèi)的歌曲，然后每行的樣式都是一樣的，使用for循環(huán)遍歷去做會(huì)特別簡便。 然后我們再看其他的一些榜單區(qū)的內(nèi)容：都是一行分布3個(gè)為上方圖片加下方文字的樣式，這個(gè)也可以用到循環(huán)來實(shí)現(xiàn)。

數(shù)據(jù)分析

這里分享一下API鏈接：http://neteasecloudmusicapi.zhaoboy.com/toplist/detail(如何調(diào)用API想必大家也會(huì)使用，或者也從其他的大佬的文章中學(xué)習(xí)過)

然后我們來看到獲取到的數(shù)據(jù)并進(jìn)行分析：

從第一張圖片我們可以知道list下獲取到若干條信息，每條信息中的updateFrequency對應(yīng)該榜單更新時(shí)間，coverImgUrl對應(yīng)該榜單的圖片，還有一項(xiàng)是tracks也是我們需要用到（看下張圖） 可以看到tracks中包含的信息就是歌單了，也就是我們官方榜單中需要用到的數(shù)據(jù) 從第三章圖可以看到，從編號為4開始tracks中的信息就為空了，也就是剛才給大家展示的原界面中只有官方 榜單需要這項(xiàng)信息，其他的榜單是不需要的。所以循環(huán)出的若干條數(shù)據(jù)中，我們需要將前4條放進(jìn)官方榜單，而后面其他的數(shù)據(jù)放進(jìn)其他的榜單當(dāng)中，for循環(huán)下我們會(huì)將所有拿到的數(shù)據(jù)都循環(huán)出來，并且樣式還是一樣的。而這個(gè)界面則是在同一數(shù)據(jù)下，分別用循環(huán)放到兩個(gè)不同的樣式當(dāng)中，大家肯定都想得到，加個(gè)if判斷就好了，接下來，讓我們看看如何實(shí)現(xiàn)。

代碼實(shí)現(xiàn)

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="{{rank}}"  wx:key="index">
                <image class="ranking-img" src="http://www.wxapp-union.com/{{item.img}}" />
                <view class="updatetime">{{item.date}}</view>
                <view class="rankinglist-name">{{item.listname}}</view>
            </view>
        </view>
    </view>
    <!-- 中間部分：官方榜容器 -->
    <view class="officiallist">
        <text class="ranking-name">官方榜</text>
        <view class="officiallistbox">
            <view class="official-list"  wx:for="{{list}}"  wx:key="index">
                <view wx:if="{{index <= 3}}">
                    <image class="ranking-img" src="http://www.wxapp-union.com/{{item.coverImgUrl}}" />
                    <view class="updatetime">{{item.updateFrequency}}</view>
                    <view class="ranking-des">
                        <block wx:for="{{item.tracks}}" wx:key="index">
                            <view class="songlist">
                                <text class="songname">{{index+1}}.</text>
                                <text class="songname">{{item.first}}</text>
                                -
                                <text class="songname">{{item.second}}</text>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- 下部分：其他所有榜單容器循環(huán) -->
    <view class="otherranking">
        <text class="otherranking-name">更多榜單</text>
        <view class="otherrankingbox">
            <block  class="otherrankinglist"  wx:for="{{list}}"  wx:key="index">
                <view class="other" wx:if="{{index > 3}}">
                    <image class="ranking-img" src="http://www.wxapp-union.com/{{item.coverImgUrl}}" />
                    <view class="updatetime">{{item.updateFrequency}}</view>
                    <view class="rankinglist-name">{{item.name}}</view>
                </view>
            </block>
        </view>
    </view>
</view>
復(fù)制代碼

wxss

/* 上部分：榜單推薦容器 */
.wrapper {
    width: 100%;
    height: 100%;
}
.ranking {
    margin: 60rpx 0 0 40rpx;
}
.rankingbox {
    display: flex;
    flex-wrap: wrap;
}
.rankinglist {
    margin: 30rpx 30rpx  30rpx 0rpx;
}
.ranking-name {
    font-size: 35rpx;
    font-weight: 550;
}
.ranking-img {
    width: 204rpx;
    height: 204rpx;
    border-radius: 10rpx;
}
.updatetime {
    position: absolute;
    margin-top: -45rpx;
    margin-left: 15rpx;
    font-size: 18rpx;
    color: rgb(241, 241, 241);
}
.rankinglist-name {
    font-size: 20rpx;
    max-width: 180rpx;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking-des {
    width: 530rpx;
    height: 150rpx;
    margin: 0rpx 20rpx 0 20rpx;
    float: right;
    position: absolute;
    margin-top: -200rpx;
    margin-left: 210rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1 1 0%;
    padding: 10px;
}
/*上部分榜單推薦和下部分其他所有榜單所用css一樣*/
/*中間官方榜單部分的榜單名，圖片和上部分一樣*/
/* 中間部分：官方榜容器 */
.officiallist {
    margin: 60rpx 0 0rpx 40rpx;
}
.officiallistbox {
    margin: 30rpx 0 20rpx 0rpx;
}
.official-list {
    margin: 0rpx 0 15rpx 0rpx;
}
.songlist {
    max-width: 450rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.songname {
    font-size: 25rpx;
}
.otherranking {
    margin: 60rpx 0 0rpx 0rpx;
}
.otherrankingbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10rpx 40rpx;
    margin: 30rpx 0 0rpx 0rpx;
}
.otherranking-name {
    margin-left: 40rpx;
    font-size: 35rpx;
    font-weight: 550;
}
.other {
    margin-bottom: 20rpx;
}
復(fù)制代碼

js部分

// const API = require('../../toplist/detail')
 const app = getApp();
Page({
  data: {
    hidden: false,  //加載是否隱藏
    list: [],
    rank: [
      {
        img: 'https://p2.music.126.net/c0iThrYPpnFVgFvU6JCVXQ==/109951164091703579.jpg',
        date: '每周四更新',
        listname: '云音樂歐美熱歌榜',
      },
      {
        img: 'https://p2.music.126.net/WTpbsVfxeB6qDs_3_rnQtg==/109951163601178881.jpg',
        date: '每周一更新',
        listname: 'iTunes榜',
      },
      {
        img: 'https://p2.music.126.net/Zb8AL5xdl9-_7WIyAhRLbw==/109951164091690485.jpg',
        date: '每天更新',
        listname: '云音樂歐美新歌榜',
      }
    ]
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    wx.request({
      url:'http://neteasecloudmusicapi.zhaoboy.com/toplist/detail',
      data: {
      },
      header: {  // 加載效果
        "Content-Type": "application/json"
      },
      success: (res) => {
        console.log(res)
        this.setData({
          list: res.data.list
        })
        if(this.data.list.length>0){
          this.setData({
            hidden: true
          })
        }
      }
    })
  },
})
復(fù)制代碼

實(shí)現(xiàn)效果

分享

大家看到代碼中，我們是通過 wx:if 去判斷 index <= 3 時(shí)數(shù)據(jù)放在officiallist這個(gè)官方榜單中，而 index > 3 時(shí)，則放在otherranking這個(gè)其他榜單中，這樣寫確實(shí)也沒錯(cuò)，也實(shí)現(xiàn)了功能，但是邏輯不嚴(yán)謹(jǐn)，官方數(shù)據(jù)發(fā)生變化時(shí)，又得修改代碼去改變if判斷的值，變化一次就得改變一次（這里說的變化是：當(dāng)API數(shù)據(jù)中改變成第六或者第幾條數(shù)據(jù)開始tracks中才為空，那么原來index > 3 就起不到作用，又得手動(dòng)去修改這個(gè)定值）。而且這樣的if判斷還有一些問題，剩下沒取到的數(shù)據(jù)會(huì)以空數(shù)據(jù)輸出，會(huì)占用一定的位置，則又需要對css進(jìn)行修改，使布局不被影響，增加了一定的麻煩。（可以具體看看調(diào)試中的顯示：下圖）

優(yōu)化方法

簡述

其實(shí)我們可以在js中進(jìn)行判斷，API中是只有前幾條數(shù)據(jù)中的tracks中是有歌單的數(shù)據(jù)的，后面其他的數(shù)據(jù)中的tracks是空的，所以我們只需要從tracks中取下手就可以。去判斷tracks何時(shí)是有數(shù)據(jù)則放在官方榜單，當(dāng)tracks中為空，則將這些數(shù)據(jù)放在其他榜單中。下面我們先看具體代碼（這里我們把修改部分的代碼放出來）

wxml

<!-- 官方榜 -->
<view class="official-list" wx:for="{{officialList}}" wx:key="index">
        <view>
            <image class="ranking-img" src="http://www.wxapp-union.com/{{item.coverImgUrl}}" />
            <view class="updatetime">{{item.updateFrequency}}</view>
            <view class="ranking-des">
                <block wx:for="{{item.tracks}}" wx:key="index">
                  //這里放的還是之前的代碼，block中循環(huán)的是tracks中的歌單數(shù)據(jù)，和之前的一樣不用修改
                </block>
            </view>
        </view>
    </view>
復(fù)制代碼

<!-- 其他榜單 -->
<block class="otherrankinglist" wx:for="{{moreList}}" wx:key="index">
    <view class="other">
        <image class="ranking-img" src="http://www.wxapp-union.com/{{item.coverImgUrl}}" />
        <view class="updatetime">{{item.updateFrequency}}</view>
        <view class="rankinglist-name">{{item.name}}</view>
    </view>
</block>
復(fù)制代碼

js:

// 在data 中新增加兩個(gè)新的空數(shù)組
  data: {
    officialList: [], //新增加
    moreList: [],  //新增加
    list: [],
    rank: [
        //這里還放之前的數(shù)據(jù)
    ],
  },
  onLoad: function (options) {
    wx.request({
     //這里還是放之前的API調(diào)用
      },
      // 重點(diǎn)：在回調(diào)函數(shù)中判斷tracks中是否有數(shù)據(jù)并放入定義的數(shù)組中
      success: (res) => {
        const oList = res.data.list.filter(item => item.tracks.length
        )
        console.log(oList)
        const mList =  res.data.list.filter( item => !item.tracks.length
        )
        this.setData({
        // 經(jīng)過判斷拿到數(shù)據(jù)后，分別對應(yīng)放入之前的定義的官方榜單和其他榜單的數(shù)組中
          officialList:oList,
          moreList:mList,
          list: res.data.list
        })
      }
    })
  },
})
復(fù)制代碼

分析

修改后將 wx:if 的語句判斷去掉了，在js中的data里面我們定義了兩個(gè)新的空數(shù)組，officialList: [] 和moreList: [] 在調(diào)取API數(shù)據(jù)成功后，我們定義了一個(gè) oList 和 mList，并判斷tracks中是否有數(shù)據(jù)，有則放在oList，沒有則放在mList；最后分別將oList 和 mList 中的數(shù)據(jù)傳給數(shù)組 officialList 和moreList，去達(dá)到我們之前所想要的效果。我們最后去調(diào)試可以發(fā)現(xiàn)，不會(huì)再有多循環(huán)出來的空數(shù)組，并且數(shù)據(jù)會(huì)根據(jù)官方API數(shù)據(jù)的更新自動(dòng)區(qū)別改變，請看圖

總結(jié)

這里我們通過一個(gè)界面的例子，從分析到優(yōu)化，雖然只是優(yōu)化其中的一個(gè)邏輯，但帶來的代碼效果還是很顯著的。作為小白的我們，從切圖開始，做假數(shù)據(jù)先把界面做出來，然后去調(diào)用真數(shù)據(jù)引入。實(shí)現(xiàn)一個(gè)功能的辦法有很多，更強(qiáng)的邏輯思維，和嚴(yán)謹(jǐn)?shù)拇a風(fēng)格也更應(yīng)該是我們追求的，也是我們小白需要慢慢改進(jìn)的地方，總體來說就是去讓自己做的更好。感謝各位大佬的觀賞，如果有不足的地方或者有更好的想法和建議也歡迎指出哦！