小程序音乐列表和音乐详情页开始

音乐列表页面：

<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 取出来就行了，如此简单！

行，音乐详情页面，我们开个好头，明天我们写具体的页面和一些小逻辑，很简单，要控制我们的节奏！

小程序音乐列表和音乐详情页开始

猜你喜欢