微信小程序硅谷音乐动态实现排行榜数据绑定并且渲染画面

最新推荐文章于 2023-03-11 16:58:11 发布

wind-Code

最新推荐文章于 2023-03-11 16:58:11 发布

阅读量973

点赞数 1

分类专栏： javaScript 文章标签： JavaScript API切换排行榜 WXML 数据动态加载

本文链接：https://blog.csdn.net/mastercao/article/details/125454330

版权

javaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先是js代码段

    let topList = await request('/toplist')
    let resultArr = []
    for (let i = 0; i < 5; i++) {
      let topListId = topList.list[i].id
      let topListItem = await request('/playlist/detail', { id: topListId })
      let weneed = { name: topListItem.playlist.name, tracks: topListItem.playlist.tracks.slice(0, 3) }
      resultArr.push(weneed)
      this.setData({
        topListItem: resultArr
      })
    }

因为现在的接口已经没有/top/list了所以我们使用/playlist/detail 这个接口来导入排行榜的数据

下面是wxml的代码段

<swiper class="topListSwiper" circular next-margin="50rpx">
      <swiper-item wx:for="{{topListItem}}" wx:key="name"> 
        <view class="swiperItem">
          <view class="title">{{item.name}}</view>
          <view class="musicItem" wx:for="{{item.tracks}}" wx:key="id" wx:for-item="musicItem">
            <image src="{{musicItem.al.picUrl}}"></image>
            <text class="count">{{index+1}}</text>
            <text class="musicName">{{musicItem.name}}</text>
          </view>
        </view>
      </swiper-item>  
    </swiper>

效果如下 :