网易云音乐开发--recommendSong搭建

recommendSong页面头部静态搭建

先新建一个 recommendSong

修改上面的nav部分

 写上面的样式。我们现在写在这个框里面放个日期

就是让这个文字基于父元素垂直水平居中 

 样式搞定 

recommendSong日期动态显示

之前我们将recommendSong静态头部做好了，现在我们需要将写死的recommendSong日期动态显示

我们先在data中定义俩个变量，动态渲染到页面上。这次我们用微信小程序封装好的日期函数

 今天又学到了，居然在小程序中可以直接使用这个内置日期函数来获取日期

 day:new Date().getDate(),
            month:new Date().getMonth()+1复制

recommendSong内容区静态搭建

头部搭建完，我们就去搭建列表区域

列表区域分为俩部分，一部分为导航，另一部分为真正的列表区域

导航

 列表区域

这里我们考虑一个问题，像有些英语歌很长。如果放任它，那么它会到下行。不美观

 单行文本用省略号代替

 这里我们用死数据代替。

注意的一点calc vh后面要有空格否则就会失效

recommendSong内容区动态显示

观看文档

 因为我们之前就把cookie值存到了本地，那么我们就直接读取它，如果没有cookie值，那就说明没有登录，重新跳转到登录界面。

如果能走下去就获取每日推荐的数据

 这里我们要用async和await因此我们可以封装成功一个方法来使用

 看一下结构，渲染出相对于的数据

<scroll-view scroll-y class="listScroll">
            <view class="srcollItem" wx:for="{{recommendList}}" wx:key="id">
                <image src="{{item.al.picUrl}}" mode=""/>
                <view class="musicInfo">
                    <text class="musicName">{{item.name}}</text>
                    <text class="musicName">{{item.ar[0].name}}</text>
                </view>
                <text class="iconfont icon-gengduo"></text>
            </view>
        </scroll-view>复制

搞定，这个新的接口。我们要修改部分代码

async getRecommendList(){
        let recommendListData=await request('/recommend/songs')
        console.log('获取每日推荐的数据',recommendListData);
        this.setData({
            recommendList:recommendListData.data.dailySongs
        })
    },复制