Página de lista de música:
<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 () {
}
})Esto no es difícil, simplemente obtenga los datos, colóquelos en los datos y luego muestre la página a través del enlace de datos de 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;
}
Cuando hacemos clic en un elemento, traemos los datos al pasado.
Luego lo sacamos de las opciones, ¡es así de simple!
OK, la página de detalles de la música, tenemos un buen comienzo, mañana escribiremos una página específica y alguna pequeña lógica, es muy simple, ¡debemos controlar nuestro ritmo!