作(zuò)為(wèi)前端的(de)小(xiǎo)白(bái)，已經學♠÷π習(xí)了(le)個(gè)把月(yuè)了(le)，for循環在微(wēi)信小(xiǎo)程序中的(de)使用(yòng)在常見(jiàn)不(bù)過了("≈ →le)；在獲取某個(gè)官方API數(shù)據後，如(rú)何将獲取的(de)若幹條數(shù>®)據分(fēn)别不(bù)重複的(de)放(fàng)入到($¶dào)不(bù)同的(de)循環當中呢(ne)？讓我們看(kàn)個(gè)小(xiǎo)小(∞×↑xiǎo)的(de)例子(zǐ)去(qù)體(tǐ)會(huì)"✔一(yī)波。

原界面分(fēn)析

界面分(fēn)析

首先我們來(lái)看(kàn)一(yī)下(xià)網易雲音(yīn)樂(yuè)其中的↓®¥(de)一(yī)個(gè)界面：

這(zhè)個(gè)界面其實相(xiàng)對(duì)來(lλ♥∑ ái)講時(shí)比較好(hǎo)做(zuò)的(de)，主要(y€δào)就(jiù)是(shì)分(fēn)為(wèi)兩大(dà)塊內(n✘ ±©èi)容，先說(shuō)中間(jiān)這(zhè)塊-->官方榜單₹<¶↓：左邊對(duì)應的(de)時(shí)榜單的(de)圖片，右邊>©₹€則是(shì)這(zhè)個(gè)榜單內(nèi)的(de)歌(gē)曲，然後每行(x↔☆δíng)的(de)樣式都(dōu)是(shì)一(yī)樣的(de)，使用€₹(yòng)for循環遍曆去(qù)做(zuò)會(huì)特别簡便。 然後我們再看(kàn)£'≥♠其他(tā)的(de)一(yī)些(xiē)榜單區(qū)的(de®©✘)內(nèi)容：都(dōu)是(shì)一(yī)行(xíng)分(fē<↔β€n)布3個(gè)為(wèi)上(shàng)方圖片加下(xià)方文(wén)↓✘☆字的(de)樣式，這(zhè)個(gè)也(yě)可(kě)以用(yòng>$★')到(dào)循環來(lái)實現(xiàn)。

數(shù)據分(fēn)析

這(zhè)裡(lǐ)分(fēn)享一(yī)下(xià)API鏈接：©αhttp://neteasecloudmusicapi.zhaoboy.com<♠/toplist/detail(如(rú)何調用(yòng)API想必大(dà)家(jiā)也(yě)會(huì)使€♠用(yòng)，或者也(yě)從(cóng)其他(tφ>₹ā)的(de)大(dà)佬的(de)文(wén)章(zhāng)中學習(xí)過)

然後我們來(lái)看(kàn)到(dào)獲取到(dào)Ω₩↕的(de)數(shù)據并進行(xíng)分(fēn)析：

從(cóng)第一(yī)張圖片我們可(kě)以知(∞> zhī)道(dào)list下(xià)獲取到(dào)若幹條信息，每條信息中的↕↕(de)updateFrequency對(duì)應該榜單更新時(shí)間(jiān)，coverImgUrl對(duì)應該榜單的(de)圖片，還(hái)有(yǒu)一(yī)項是(shì)♦☆↑tracks也(yě)是(shì)我們需要(yào)用(yòng)到(dào)（看(kàn)下(xià)張圖）$ ​ 可(kě)以看(kàn)到(dào)tracks中包含的(de)信息就(ji£∏ù)是(shì)歌(gē)單了(le)，也(yě)就(jiù)是(shì)我們₩ ∞↑官方榜單中需要(yào)用(yòng)到(dào)的(de)數(shù)據₩↕λ€ 從(cóng)第三章(zhāng)圖可(kě)以看(kàn)到(dào)，從(cóng)編号σ÷為(wèi)4開(kāi)始tracks中的(de)信息就(jiù)為(wèi)空(kōng)了(le)，也("✔≠yě)就(jiù)是(shì)剛才給大(dà)家(ji<♠ φā)展示的(de)原界面中隻有(yǒu)官方 榜單需要(yào)這(zhè)項信息，其他(tā§↓≤)的(de)榜單是(shì)不(bù)需要(yào)的(d♥σ☆♥e)。所以循環出的(de)若幹條數(shù)據中，我們需要(y← φào)将前4條放(fàng)進官方榜單，而後面其他(tā)的(¶≈de)數(shù)據放(fàng)進其他(tā)的(de)榜單當中，for循環下(xià)我們會(huì)将所有(yǒu)拿(ná)到(dào)的(de)數(φ≤↕€shù)據都(dōu)循環出來(lái)，并且樣式還(hái)是(s≤↕hì)一(yī)樣的(de)。而這(zhè)個(gè)界面則是׶(shì)在同一(yī)數(shù)據下(xià)，分(fēn)别用(yòng)循€ ♠≈環放(fàng)到(dào)兩個(gè)不(bù)同的(de₽‌∏​)樣式當中，大(dà)家(jiā)肯定都(dōu)想得(de)γ✔到(dào)，加個(gè)if判斷就(jiù)好(hǎo)了(le)，接下(xià)來(®↕★×lái)，讓我們看(kàn)看(kàn)如(rú)何實現(xiàn)。

代碼實現(xiàn)

wxml

<view class="body-view">
    &l∑₩‍t;loading hidden="{{hidden}}">
        加載中...¶' 
    </loading>
</view>
♥∞ '
<view class="wrapper">
    <!∞♠-- 上(shàng)部分(fēn)：榜單推薦容器(qì) -->™≥;
    <view class="ranking">
    ≈♥δ​    <text class="ranking-na€γ₩Ωme">榜單推薦</text>
        <vie§€ w class="rankingbox">
  <           <view  class=" ✔→$rankinglist" wx:for="{{rank}}">"  wx:key="index">
             <ε£   <image class="ranking-img" src=₩π♦"http://www.wxapp-union.com/{{item.img}}"  ¶₹/>
                <view clas§ s="updatetime">{{item.date}}</view>☆©;
                <view class=©‌©"rankinglist-name">{{item.>→‍αlistname}}</view>
            </view&g←σεt;
        </view>
    </view>
β£<≥    <!-- 中間(jiān)部分(fēn)：官方榜容器(qì) -<≈¶->
    <view class="offici<€allist">
        <text class="rankin₽α g-name">官方榜</text>
   $​     <view class="officiallistbox">
   > ≥          <view class="o•₹₹♣fficial-list"  wx:for="{{list}}"  wx:key'π&="index">
                <view←♥ wx:if="{{index <= 3}}">
         ∏♠           <image class="ranking-img" src="htt☆★↑p://www.wxapp-union.com/{{item.coverI÷÷≈'mgUrl}}" />
                    &"σ÷lt;view class="updatetime">{{i↑↓tem.updateFrequency}}</view>
♣¥
                    <view class="ranking-deδ★s">
                        <block w ♠x:for="{{item.tracks}}" wx:key="index∞λ">
                     ∞✔α≈       <view class="songli♦€st">
                                ×™↔<text class="songname">{{index+1♠∑σ}}.</text>
                   &×γ             <text class="songname">{{•‌§&item.first}}</text>
 >₹¥                               -
     ♠✘&★                           <tex≥‌÷t class="songname">{{item.second}}<↔∞≥;/text>
                            &l$≤♠®t;/view>
                δ♣δΩ        </block>
         ♣₩δ           </view>
       →♦↕π         </view>
            <×★;/view>
        </view>
 ¶∑   </view>
    <!-- 下(xià)部分(fē≠₩εn)：其他(tā)所有(yǒu)榜單容器(qì)循環 -->
    <₽×→♦view class="otherranking">¶≈
        <text class="other€"σ‌ranking-name">更多(duō)榜單</text>
 ≥&☆ε       <view class="otherrank α↑ingbox">
            <block  clas™​σs="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="u↕< pdatetime">{{item.updateFrequency§₹☆₩}}</view>
            ≥ו£        <view class="rankinglist-na‍←me">{{item.name}}</view>
®                 </view>
         λ£α$   </block>
        </view>
    <"↑;/view>
</view>
複制(zhì)代碼

wxss

/* 上(shàng)部分(fēn)：榜單推薦容器(qì) */
.wra®♣✔₽pper {
    width: 100%;
    height: 100%;
}
γ₽☆↔
.ranking {
    margin: 60rpx 0 0 40rpx→♥;
}
.rankingbox {
    display:‍∑φ→ flex;
    flex-wrap: wrap;
}
.rankiλ↔nglist {
    margin: 30rpx 30rpx  30rpx✘Ω★ 0rpx;
}
.ranking-name {
    font♦<-size: 35rpx;
    font-weight: 550;
↑≤}
.ranking-img {
    width: 204rpx;
    hei₽✔ght: 204rpx;
    border-radius: 10rp↕®‍₹x;
}
.updatetime {
    positio↓γ≈≥n: absolute;
    margin-top: -45rpx;
    marg'•in-left: 15rpx;
    font-size≠✘✔≈: 18rpx;
    color: rgb(241, 241, 24←<©1);
}
.rankinglist-name {
    font-size: 2÷±€±0rpx;
    max-width: 180rpx;
    overflow•©: hidden;
    text-overflow: ellipsis;&∑™
}
.ranking-des {
    width: →÷™‌530rpx;
    height: 150rpx;€"δ
    margin: 0rpx 20rpx 0 20rpx;
   ♣£§≤ float: right;
    position: ab≈>solute;
    margin-top: -200r¶©px;
    margin-left: 210rpx;★©
    display: flex;
    flex-direction:≠$γ column;
    justify-content: ☆§✘πspace-around;
    flex: 1 1 0%;
    paddi™₹ng: 10px;
}
/*上(shàng)部分(fēn)榜單推薦和(héδ™π♠)下(xià)部分(fēn)其他(tā)所有(yǒu)β"榜單所用(yòng)css一(yī)樣*/
/*中間(₩×jiān)官方榜單部分(fēn)的(de)榜單名，圖片和(hé)上(§•£↕shàng)部分(fēn)一(yī)樣*/
/* 中間(jiān)部分(fēn  )：官方榜容器(qì) */
.officiallist {
    margin ££: 60rpx 0 0rpx 40rpx;
}
.officialliλ"♠∏stbox {
    margin: 30rpx 0 2<©§0rpx 0rpx;
}
.official-list {
    marδ​↓gin: 0rpx 0 15rpx 0rpx;
}
.s÷ε☆onglist {
    max-width: 450rpx;
    wh✔×λite-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;
    p‌≠adding: 10rpx 40rpx;
    margin: 30rpx 0 0rpx ✔±★0rpx;
}
.otherranking-name {
    margin♥¥ -left: 40rpx;
    font-size: 35rpx;
    font-←¥≤weight: 550;
}
.other {
    margi¥∏λn-bottom: 20rpx;
}
複制(zhì)代碼

js部分(fēn)

// const API = require('../../toplist/detail')
 const app = getApp();
Page({
  data: {
    hidden: false,  //加載是(shì)否隐藏
    list: [],
    rank: [
      {
        img: 'static/picture/109951164091703579.jpg♥​¥‌',
        date: '每周四更新',
        listname: '雲音(yīn)樂(yuè)歐美(měi)熱(rè)歌(gē)榜',
      },
      {
        img: 'static/picture/109951163601178881.jpg',
        date: '每周一(yī)更新',
        listname: 'iTunes榜',
      },
      {
        img: 'static/picture/109951164091690485.jpg',
        date: '每天更新',
        listname: '雲音(yīn)樂(yuè)歐美(měi)新歌(gē)榜',
      }
    ]
  },
  /**
   * 生(shēng)命周期函數(shù)--監聽(tīng)頁面加載
 •>  */
  onLoad: function (options) {
    wx.request({
      url:'http://neteasecloudmusicapi.zhaobσ<oy.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
          })
        }
      }
    })
  ♦β},
})
複制(zhì)代碼

實現(xiàn)效果

分(fēn)享

大(dà)家(jiā)看(kàn)到(dào)代碼中，我們是(shì)通(tōng)過‍£<‍ wx:if 去(qù)判斷 index <= 3 時(shí)數(shù)據放(fàng)在officiallist這(zhè)個(gè)官方榜單中，而 index > 3 時(shí)，則放(fàng)在otherranking這(zhè)個(gè)其他(tā)榜單中，這(zhè)樣寫确實也(yě)沒錯(cuò)，也(§™₩§yě)實現(xiàn)了(le)功能(néng)，但(dàn)是(shì)邏輯不(b¥∑β•ù)嚴謹，官方數(shù)據發生(shēng)變化( ★huà)時(shí)，又(yòu)得(de)修改代碼去(qù)改變if判斷的(de)值，₽"©變化(huà)一(yī)次就(jiù)得(de)改變一(yī)次（這(zhè)裡(lǐ←♠γ)說(shuō)的(de)變化(huà)是(shì)：當API數(shù)據中λ•♥‌改變成第六或者第幾條數(shù)據開(kāi)始tracks中才為(wè•©∑φi)空(kōng)，那(nà)麽原來(lái)index > 3 就(jiù)起不(bù)到(dào)作(zuò)用(yòng)，又(yòu)得(de)手動去(q→α↑Ωù)修改這(zhè)個(gè)定值）。而且這(zhè)樣的(d♠πσe)if判斷還(hái)有(yǒu)一(yī)些(xiē)問(wèn)題，剩​₩下(xià)沒取到(dào)的(de)數(shù)據會(≥ huì)以空(kōng)數(shù)據輸出，會(huì)占用(yòng)一(yī)♣®•定的(de)位置，則又(yòu)需要(yào)對(duì)css進行(xíng)γ ♦修改，使布局不(bù)被影(yǐng)響，增加了(le)♠"φ一(yī)定的(de)麻煩。（可(kě)以具體(tǐ)看©Ω(kàn)看(kàn)調試中的(de)顯示：下(xià)圖）

優化(huà)方法

簡述

其實我們可(kě)以在js中進行(xíng)判斷，API♦£÷&中是(shì)隻有(yǒu)前幾條數(shù)據中的(de)'ε<tracks中是(shì)有(yǒu)歌(gē)單的(de)數(shù)據的(de)，後面其他(t&γ×®ā)的(de)數(shù)據中的(de)tracks是(shì)空(kōng)的(de)，所以我們隻需要(φ÷✔yào)從(cóng)tracks中取下(xià)手就(jiù)可(kě)以。去(qù)判斷&≠tracks何時(shí)是(shì)有(yǒu)數(shù)據則放׶(fàng)在官方榜單，當tracks中為(wèi)空(kōng)，則将這(zhè)些(xiē∞γ☆)數(shù)據放(fàng)在其他(tā)榜單中。下(xià)面‍€我們先看(kàn)具體(tǐ)代碼（這(zhè)裡(lǐ)我們把修改部分(fēn)的(de)≤↓代碼放(fàng)出來(lái)）

wxml

<!-- 官方榜 -->
<view class="official-list↓♠≤" wx:for="{{officialList}}" wx:key="i∏<ndex">
        <view>
‍×            <image class="ranking-im≥φ→g" src="http://www.wxapp-union.com/{{itemπ∑€≥.coverImgUrl}}" />
            <∏®;view class="updatetime">{{item.upda↑£teFrequency}}</view>
            <™γπ ;view class="ranking-des">
         ®φ       <block wx:for="{{item.tracks✔>✔}}" wx:key="index">
                  /$​✘&/這(zhè)裡(lǐ)放(fàng)的(de)還(hái)是(shì)之前的(de)代₽©™±碼，block中循環的(de)是(shì)tracks中的(de)歌★♦♥↕(gē)單數(shù)據，和(hé)之前的(de)一(yī)樣不(bù)用(yòng→₽π)修改
                </block>
      <€✔      </view>
        </view>
    &★↔lt;/view>
複制(zhì)代碼

<!-- 其他(tā)榜單 -->
<block class="othe​λrrankinglist" wx:for="{{moreList}}" wx:key=♣✔β"index">
    <view class="other"&gε ₽ t;
        <image class="ranking-img" src=γ¶≠"http://www.wxapp-union.com/{{i♦∏tem.coverImgUrl}}" />
        <vie↕★♦₹w class="updatetime">{{item♥©".updateFrequency}}</view>
      •♠¥←  <view class="rankinglist-name">{{ite¶"Ωλm.name}}</view>
    </view>
</™÷•block>
複制(zhì)代碼

js:

// 在data 中新增加兩個(gè)新的(de)空(kōng)數(shù)↕¶組
  data: {
    officialList: [], //新增加
    moreList: [],  //新增加
    list: [],
    rank: [
        //這(zhè)裡(lǐ)還(hái)放(fàng)之前的(de)數(shù)據
    ],
  },
  onLoad: function (options) {
    wx.request({
     //這(zhè)裡(lǐ)還(hái)是(shì)放(fàng)之前的(de)API調用Ω★(yòng)
      },
      // 重點：在回調函數(shù)中判斷tracks中是(shì)否有(yǒu)數(shù)據并放(≥ fàng)入定義的(de)數(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({
        // 經過判斷拿(ná)到(dào)數(shù)據後，分(fε✘σēn)别對(duì)應放(fàng)入之前的(de)±‍σ定義的(de)官方榜單和(hé)其他(tā)榜單的(d₹>£βe)數(shù)組中
          officialList:oList,
          moreList:mList,
          list: res.data.list
        })
      }
    }  σ)
  },
})
複制(zhì)代碼

分(fēn)析

修改後将 wx:if 的(de)語句判斷去(qù)掉了(le)，在js中的(de)data裡(lǐ)面我✘←‌π們定義了(le)兩個(gè)新的(de)空(kōng)數(shù)組，officialList: [] 和(hé)moreList: [] 在調取API數(shù)據成功後，我們定義了(le)一(yī)個(gè) oList 和(hé) mList，并判斷tracks中是(shì)否有(yǒu)數(shù)據，有(yǒu)則放(β↔∑γfàng)在oList，沒有(yǒu)則放(fàng)在mList；最後分(fēn)别将oList 和(hé) mList 中的(de)數(shù)據傳給數(shù)組 officialList 和(hé)moreList，去(qù)達到(dào)我們之前所想要(yào)的(de)效果。我們最後去(qù)調試可(k ↑¶ě)以發現(xiàn)，不(bù)會(huì)再有(yǒu)多(duō)循環出來(lái€↑δ)的(de)空(kōng)數(shù)組，并且數(shù)據會(hu™÷Ω≥ì)根據官方API數(shù)據的(de)更新自(zì)動區(qū)别改變，請®♥↔•(qǐng)看(kàn)圖

總結

這(zhè)裡(lǐ)我們通(tōng)過一(yī)個(gè)界面的(☆♠¶de)例子(zǐ)，從(cóng)分(fēn)析到(dà€÷≤o)優化(huà)，雖然隻是(shì)優化(huà)其中的(de)≈&σ♣一(yī)個(gè)邏輯，但(dàn)帶來(lái)的(de)© 代碼效果還(hái)是(shì)很(hěn)顯著的(de)。作(z£ ≈uò)為(wèi)小(xiǎo)白(bái)的(de)我£≈們，從(cóng)切圖開(kāi)始，做(zuò)假數(shù)據先把界面做(zuò)出來γ< (lái)，然後去(qù)調用(yòng)真數(shù)據引入φ÷¶≤。實現(xiàn)一(yī)個(gè)功能(néng)的±←(de)辦法有(yǒu)很(hěn)多(duō)，更強的(>∞&§de)邏輯思維，和(hé)嚴謹的(de)代碼風(fēng)格也(yě)更應該是(shì'£↕)我們追求的(de)，也(yě)是(shì)我們小(xiǎo)白(bái)需要(yào)慢(mà↕×n)慢(màn)改進的(de)地(dì)方，總體(t‌σǐ)來(lái)說(shuō)就(jiù)是(shì)去(qù)讓自(zì)己做(←♥zuò)的(de)更好(hǎo)。感謝(xiè)各位大(dà)佬"®ε©的(de)觀賞，如(rú)果有(yǒu)不(bù)足的(de)地(dì)方或者‌>有(yǒu)更好(hǎo)的(de)想法和(hé)建議(yì)也(yě)歡迎指出哦！