作爲(wéi / wèi)前端的(de)小白，已經學習了(le／liǎo)個(gè)把月了(le／liǎo)，for循環在(zài)微信小程序中的(de)使用在(zài)常見不(bù)過了(le／liǎo)；在(zài)獲取某個(gè)官方API數據後，如何将獲取的(de)若幹條數據分别不(bù)重複的(de)放入到(dào)不(bù)同的(de)循環當中呢？讓我們看個(gè)小小的(de)例子(zǐ)去體會一波。

原界面分析

界面分析

首先我們來(lái)看一下網易雲音樂其中的(de)一個(gè)界面：

這(zhè)個(gè)界面其實相對來(lái)講時(shí)比較好做的(de)，主要(yào / yāo)就(jiù)是(shì)分爲(wéi / wèi)兩大(dà)塊内容，先說(shuō)中間這(zhè)塊-->官方榜單：左邊對應的(de)時(shí)榜單的(de)圖片，右邊則是(shì)這(zhè)個(gè)榜單内的(de)歌曲，然後每行的(de)樣式都是(shì)一樣的(de)，使用for循環遍曆去做會特别簡便。 然後我們再看其他(tā)的(de)一些榜單區的(de)内容：都是(shì)一行分布3個(gè)爲(wéi / wèi)上(shàng)方圖片加下方文字的(de)樣式，這(zhè)個(gè)也(yě)可以(yǐ)用到(dào)循環來(lái)實現。

數據分析

這(zhè)裏分享一下API鏈接：http://neteasecloudmusicapi.zhaoboy.com/toplist/detail(如何調用API想必大(dà)家也(yě)會使用，或者也(yě)從其他(tā)的(de)大(dà)佬的(de)文章中學習過)

然後我們來(lái)看到(dào)獲取到(dào)的(de)數據并進行分析：

從第一張圖片我們可以(yǐ)知道(dào)list下獲取到(dào)若幹條信息，每條信息中的(de)updateFrequency對應該榜單更新時(shí)間，coverImgUrl對應該榜單的(de)圖片，還有一項是(shì)tracks也(yě)是(shì)我們需要(yào / yāo)用到(dào)（看下張圖） 可以(yǐ)看到(dào)tracks中包含的(de)信息就(jiù)是(shì)歌單了(le／liǎo)，也(yě)就(jiù)是(shì)我們官方榜單中需要(yào / yāo)用到(dào)的(de)數據 從第三章圖可以(yǐ)看到(dào)，從編号爲(wéi / wèi)4開始tracks中的(de)信息就(jiù)爲(wéi / wèi)空了(le／liǎo)，也(yě)就(jiù)是(shì)剛才給大(dà)家展示的(de)原界面中隻有官方 榜單需要(yào / yāo)這(zhè)項信息，其他(tā)的(de)榜單是(shì)不(bù)需要(yào / yāo)的(de)。所以(yǐ)循環出(chū)的(de)若幹條數據中，我們需要(yào / yāo)将前4條放進官方榜單，而(ér)後面其他(tā)的(de)數據放進其他(tā)的(de)榜單當中，for循環下我們會将所有拿到(dào)的(de)數據都循環出(chū)來(lái)，并且樣式還是(shì)一樣的(de)。而(ér)這(zhè)個(gè)界面則是(shì)在(zài)同一數據下，分别用循環放到(dào)兩個(gè)不(bù)同的(de)樣式當中，大(dà)家肯定都想得到(dào)，加個(gè)if判斷就(jiù)好了(le／liǎo)，接下來(lái)，讓我們看看如何實現。

代碼實現

wxml

<view class="body-view">
    <loading hidden="{{hidden}}">
        加載中...
    </loading>
</view>
<view class="wrapper">
    <!-- 上(shàng)部分：榜單推薦容器 -->
    <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>
    <!-- 下部分：其他(tā)所有榜單容器循環 -->
    <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>
複制代碼

wxss

/* 上(shàng)部分：榜單推薦容器 */
.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;
}
/*上(shàng)部分榜單推薦和(hé / huò)下部分其他(tā)所有榜單所用css一樣*/
/*中間官方榜單部分的(de)榜單名，圖片和(hé / huò)上(shàng)部分一樣*/
/* 中間部分：官方榜容器 */
.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;
}
複制代碼

js部分

// const API = require('../../toplist/detail')
 const app = getApp();
Page({
  data: {
    hidden: false,  //加載是(shì)否隐藏
    list: [],
    rank: [
      {
        img: '../static/picture/109951164091703579.jpg',
        date: '每周四更新',
        listname: '雲音樂歐美熱歌榜',
      },
      {
        img: '../static/picture/109951163601178881.jpg',
        date: '每周一更新',
        listname: 'iTunes榜',
      },
      {
        img: '../static/picture/109951164091690485.jpg',
        date: '每天更新',
        listname: '雲音樂歐美新歌榜',
      }
    ]
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  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
          })
        }
      }
    })
  },
})
複制代碼

實現效果

分享

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

優化方法

簡述

其實我們可以(yǐ)在(zài)js中進行判斷，API中是(shì)隻有前幾條數據中的(de)tracks中是(shì)有歌單的(de)數據的(de)，後面其他(tā)的(de)數據中的(de)tracks是(shì)空的(de)，所以(yǐ)我們隻需要(yào / yāo)從tracks中取下手就(jiù)可以(yǐ)。去判斷tracks何時(shí)是(shì)有數據則放在(zài)官方榜單，當tracks中爲(wéi / wèi)空，則将這(zhè)些數據放在(zài)其他(tā)榜單中。下面我們先看具體代碼（這(zhè)裏我們把修改部分的(de)代碼放出(chū)來(lái)）

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">
                  //這(zhè)裏放的(de)還是(shì)之(zhī)前的(de)代碼，block中循環的(de)是(shì)tracks中的(de)歌單數據，和(hé / huò)之(zhī)前的(de)一樣不(bù)用修改
                </block>
            </view>
        </view>
    </view>
複制代碼

<!-- 其他(tā)榜單 -->
<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>
複制代碼

js:

// 在(zài)data 中新增加兩個(gè)新的(de)空數組
  data: {
    officialList: [], //新增加
    moreList: [],  //新增加
    list: [],
    rank: [
        //這(zhè)裏還放之(zhī)前的(de)數據
    ],
  },
  onLoad: function (options) {
    wx.request({
     //這(zhè)裏還是(shì)放之(zhī)前的(de)API調用
      },
      // 重點：在(zài)回調函數中判斷tracks中是(shì)否有數據并放入定義的(de)數組中
      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({
        // 經過判斷拿到(dào)數據後，分别對應放入之(zhī)前的(de)定義的(de)官方榜單和(hé / huò)其他(tā)榜單的(de)數組中
          officialList:oList,
          moreList:mList,
          list: res.data.list
        })
      }
    })
  },
})
複制代碼

分析

修改後将 wx:if 的(de)語句判斷去掉了(le／liǎo)，在(zài)js中的(de)data裏面我們定義了(le／liǎo)兩個(gè)新的(de)空數組，officialList: [] 和(hé / huò)moreList: [] 在(zài)調取API數據成功後，我們定義了(le／liǎo)一個(gè) oList 和(hé / huò) mList，并判斷tracks中是(shì)否有數據，有則放在(zài)oList，沒有則放在(zài)mList；最後分别将oList 和(hé / huò) mList 中的(de)數據傳給數組 officialList 和(hé / huò)moreList，去達到(dào)我們之(zhī)前所想要(yào / yāo)的(de)效果。我們最後去調試可以(yǐ)發現，不(bù)會再有多循環出(chū)來(lái)的(de)空數組，并且數據會根據官方API數據的(de)更新自動區别改變，請看圖

總結

這(zhè)裏我們通過一個(gè)界面的(de)例子(zǐ)，從分析到(dào)優化，雖然隻是(shì)優化其中的(de)一個(gè)邏輯，但帶來(lái)的(de)代碼效果還是(shì)很顯著的(de)。作爲(wéi / wèi)小白的(de)我們，從切圖開始，做假數據先把界面做出(chū)來(lái)，然後去調用真數據引入。實現一個(gè)功能的(de)辦法有很多，更強的(de)邏輯思維，和(hé / huò)嚴謹的(de)代碼風格也(yě)更應該是(shì)我們追求的(de)，也(yě)是(shì)我們小白需要(yào / yāo)慢慢改進的(de)地(dì / de)方，總體來(lái)說(shuō)就(jiù)是(shì)去讓自己做的(de)更好。感謝各位大(dà)佬的(de)觀賞，如果有不(bù)足的(de)地(dì / de)方或者有更好的(de)想法和(hé / huò)建議也(yě)歡迎指出(chū)哦！