音乐列表页面:
<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 () {
}
})
这个没啥难度,就是获取数据,放data 里面,然后通过 微信的数据绑定来显示页面就行了!
/* 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;
}
当我们点击一个条目的时候,带着数据过去
然后我们从 options 取出来就行了,如此简单!
行,音乐详情页面,我们开个好头,明天我们写具体的页面和一些小逻辑,很简单,要控制我们的节奏!