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
})
},