首页 前端知识 网易云音乐开发--recommendSong搭建

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

2024-01-25 10:01:01 前端知识 前端哥 306 354 我要收藏

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
        })
    },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/293.html
标签
css3
评论
发布的文章

Ajax学习(3rd)

2024-02-04 11:02:39

jQuery之事件触发器trigger()

2024-02-04 11:02:02

数据可视化一、ECharts

2024-02-04 11:02:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!