предисловие
Как фронтенд-новичок, учусь уже месяц.for循环Использование в апплете WeChat очень распространено, после получения определенных официальных данных API, как без повторения поместить несколько полученных данных в разные циклы? Давайте посмотрим на небольшой пример, чтобы испытать волну.
Оригинальный анализ интерфейса
анализ интерфейса
Во-первых, давайте взглянем на один из интерфейсов NetEase Cloud Music:
На самом деле этот интерфейс сделать относительно легко.В основном он разделен на две части.Поговорим о средней --> Официальный список: картинка слева соответствует списку, а справа список в этом списке песни, то стили для каждой строки одинаковые, что особенно легко сделать с циклом for. Затем давайте посмотрим на содержимое некоторых других областей списка: все они находятся в строке с 3 стилями для верхней картинки и нижнего текста, Это также может быть достигнуто с помощью цикла.
анализ данных
Поделитесь ссылкой API здесь:http://neteasecloudmusicapi.zhaoboy.com/toplist/detail(Как вызвать API должны использовать все, или узнать из статей других больших парней)
Затем давайте посмотрим полученные данные и проанализируем их:Из первой фотографии мы можем знать
listНесколько фрагментов информации получены в рамкахupdateFrequencyВ соответствии со временем обновления списка,coverImgUrlВ соответствии с изображениями в списке есть еще один элемент, которыйtracksЭто также то, что нам нужно использовать (см. Следующее изображение)Вы можете видеть, что информация, содержащаяся в треках, представляет собой список воспроизведения, данные, которые нам нужно использовать в нашем официальном списке.
Как видно из рисунка в главе 3, начиная с цифры 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="{{rank}}" wx:key="index">
<image class="ranking-img" src="{{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="{{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>
<!-- 下部分：其他所有榜单容器循环 -->
<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="{{item.coverImgUrl}}" />
<view class="updatetime">{{item.updateFrequency}}</view>
<view class="rankinglist-name">{{item.name}}</view>
</view>
</block>
</view>
</view>
</view>
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;
}
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: '云音乐欧美新歌榜',
}
]
},
/**
* 生命周期函数--监听页面加载
*/
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
})
}
}
})
},
})
Достичь результатов
доля
Как вы можете видеть в коде, мы используем wx:if для оценкиindex <= 3 Когда данные помещаются вofficiallistВ этом официальном списке иindex > 3, затем поставьтеotherrankingВ этом другом списке правильно писать так, и он также реализует функцию, но логика не является строгой.Когда официальные данные меняются, код должен быть изменен, чтобы изменить значение суждения if. есть: когда данные API меняются на шестые или первые несколько данных, дорожки будут пустыми, тогда исходныеindex > 3 Это не сработает, и вам придется вручную изменить этот параметр). Кроме того, с этим еще есть некоторые проблемы, если судить.Остальные данные, которые не были получены, будут выводиться как пустые данные, которые будут занимать определенную позицию.Поэтому необходимо изменить css, чтобы макет не пострадавших, что увеличивает определенное количество неприятностей. (Вы можете увидеть дисплей в режиме отладки: следующий рисунок)
Оптимизация
Кратко
На самом деле мы можем судить в js, только первые несколько кусков данных в APItracksВ середине находятся данные плейлиста, а остальные данные сзади.tracksпуст, поэтому нам нужно только начатьtracksВы можете взять его из середины. судитьtracksКогда есть данные, они помещаются в официальный список.tracksЕсли он пуст, данные будут помещены в другие списки. Давайте сначала посмотрим на конкретный код (здесь мы выкладываем измененную часть кода)
wxml
<!-- 官方榜 -->
<view class="official-list" wx:for="{{officialList}}" wx:key="index">
<view>
<image class="ranking-img" src="{{item.coverImgUrl}}" />
<view class="updatetime">{{item.updateFrequency}}</view>
<view class="ranking-des">
<block wx:for="{{item.tracks}}" wx:key="index">
//这里放的还是之前的代码，block中循环的是tracks中的歌单数据，和之前的一样不用修改
</block>
</view>
</view>
</view>
<!-- 其他榜单 -->
<block class="otherrankinglist" wx:for="{{moreList}}" wx:key="index">
<view class="other">
<image class="ranking-img" src="{{item.coverImgUrl}}" />
<view class="updatetime">{{item.updateFrequency}}</view>
<view class="rankinglist-name">{{item.name}}</view>
</view>
</block>
js:
// 在data 中新增加两个新的空数组
data: {
officialList: [], //新增加
moreList: [], //新增加
list: [],
rank: [
//这里还放之前的数据
],
},
onLoad: function (options) {
wx.request({
//这里还是放之前的API调用
},
// 重点：在回调函数中判断tracks中是否有数据并放入定义的数组中
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({
// 经过判断拿到数据后，分别对应放入之前的定义的官方榜单和其他榜单的数组中
officialList:oList,
moreList:mList,
list: res.data.list
})
}
})
},
})
анализировать
будет измененwx:ifСуждение оператора удалено.В данных в js мы определяем два новых пустых массива.officialList: []а такжеmoreList: []После успешного вызова данных API мы определяемoListа такжеmList, и определить, есть ли данные в треках, и если да, то положить их вoList, если нет, поставьmList; и, наконец,oListа такжеmListДанные, переданные в массивofficialListа такжеmoreList, для достижения желаемого эффекта. Мы, наконец, перешли к отладке и обнаружили, что больше не будет зацикленных пустых массивов, а данные будут автоматически дифференцированы и изменены в соответствии с обновлением официальных данных API, см. Рисунок
Суммировать
Здесь мы используем пример интерфейса, от анализа до оптимизации, хотя оптимизирована только одна логика, эффект кода все равно очень значителен. Как новичок, мы начинаем с вырезания картинки, сначала делаем интерфейс при создании поддельных данных, а затем вызываем настоящие данные для импорта. Есть много способов реализовать функцию. Более сильное логическое мышление и строгий стиль кода также должны быть тем, к чему мы стремимся. Это также то, где нам нужно медленно улучшаться. В общем, мы хотим сделать себя лучше. Спасибо за просмотр, если есть какие-либо недостатки или лучшие идеи и предложения, пожалуйста, укажите!