Music list page:
<view class="container">
<view class="list">
<text>播放全部</text>
<text>多选</text>
</view>
<view class="music_list">
<view class="item" wx:for="{
{musicList}}" wx:key = "id"
bindtap="gogogo"
id="{
{item.id}}"
>
<image src="{
{item.artists[0].picUrl}}"></image>
<view class="desc">
<text>{
{item.artists[0].name}}</text>
<text>我的热情，王蓉蓉</text>
</view>
<text class="fr">
go
</text>
</view>
</view>
</view>js :
// pages/dayrecommand/dayrecommand.js
Page({
/**
* 页面的初始数据
*/
data: {
"musicList":[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
url: 'http://localhost:3000/recommend/songs',
header:{
"cookie":wx.getStorageSync('cookie')
},
success:(res)=>{
console.log(res.data.recommend)
this.setData({
musicList: res.data.recommend
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
gogogo:function(event){
// 拿到musicId
let id = event.currentTarget.id;
wx.navigateTo({
url: `/pages/hello/hello?id=${id}`
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})This is not difficult, just get the data, put it in the data, and then display the page through the data binding of WeChat!
/* pages/dayrecommand/dayrecommand.wxss */
page{
width: 100%;
height: 100%;
}
.container {
background:#CCC;
padding: 10rpx;
border-radius: 20rpx;
height: 100%;
box-sizing: border-box;
}
.list {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.item {
display: flex;
position: relative;
margin-bottom: 20rpx;
}
.item image {
width: 80rpx;
height: 80rpx;
}
.desc {
margin-left: 20rpx;
display: flex;
flex-direction: column;
}
.desc text{
height: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
}
.fr {
position: absolute;
width: 80rpx;
height: 80rpx;
border: 1px solid red;
display: block;
top:0;
right:0;
text-align: right;
font-size:24rpx;
line-height: 24rpx;
}
When we click on an item, we bring the data to the past
Then we just take it out from the options, it's that simple!
OK, the music details page, we have a good start, tomorrow we will write a specific page and some small logic, it is very simple, we must control our rhythm!