页面跳转

点击歌单项，需要将歌单id传递给歌曲列表页，每个歌单项是通过自定义组件实现的，所以需要在歌单playlist组件中实现跳转和参数传递

在playlist组件的js文件中添加goToMusiclist方法，如下：

  methods: {goToMusiclist() {wx.navigateTo({url: `../../pages/musiclist/musiclist?playlistId=${this.properties.playlist.id}`,})},
...}

在playlist组件的wxml文件中添加点击事件

新建musiclist页面，在musiclist.js的onLoad方法打印接收到的数据

  onLoad: function (options) {console.log(options)},

点击任一歌单，进入musiclist页面，打印以下信息，说明页面跳转成功，并成功接收到了playlistId参数。

实现流程如下入所示：

添加云函数路由

在music云函数中添加musiclist路由

 // 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router')
const rp = require('request-promise')
const BASE_URL = 'http://xx.xx.xx'cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {const app = new TcbRouter({event})app.router('playlist', async (ctx, next) => {ctx.body = await cloud.database().collection('playlist').skip(event.start).limit(event.count).orderBy('createTime', 'desc').get().then((res) => {return res})})//这里直接将歌单详情接口中请求的数据返回给调用者app.router('musiclist', async (ctx, next) => {ctx.body = await rp(BASE_URL + '/playlist/detail?id=' + parseInt(event.playlistId)).then((res) => {console.log(res)return JSON.parse(res)})})return app.serve()
}

musiclist自定义组件

新建musiclist自定义组件

musiclist.wxml ：

<block wx:for="{{musiclist}}" wx:key="id"><view class="musiclist-container {{item.id === playingId ? 'playing': ''}}" bind:tap="onSelect" data-musicid="{{item.id}}" data-index="{{index}}"><view class="musiclist-index">{{index+1}}</view><view class="musiclist-info"><view class="musiclist-name">{{item.name}}<text class="musiclist-alia">{{item.alia.length==0?"":item.alia[0]}}</text></view><view class="musiclist-singer">{{item.ar[0].name}} - {{item.al.name}}</view></view></view>
</block>

musiclist.js :

// components/musiclist/musiclist.js
const app = getApp()
Component({/*** 组件的属性列表*/properties: {musiclist: Array},/*** 组件的初始数据*/data: {playingId: -1},pageLifetimes: {show() {this.setData({playingId: parseInt(app.getPlayMusicId())})}},/*** 组件的方法列表*/methods: {onSelect(event) {console.log('被选中了')// 事件源 事件处理函数 事件对象 事件类型// console.log(event.currentTarget.dataset.musicid)const ds = event.currentTarget.datasetconst musicid = ds.musicidthis.setData({playingId: musicid})wx.navigateTo({url: `../../pages/player/player?musicId=${musicid}&index=${ds.index}`,})}}
})

musiclist.wxss :

.musiclist-container {display: flex;padding: 14rpx 20rpx;align-items: center; /* 垂直居中 */
}.musiclist-index {color: #888;font-size: 34rpx;width: 80rpx;
}.musiclist-info {flex-grow: 1;width: 0;
}.musiclist-name {font-size: 34rpx;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 10rpx;
}.musiclist-alia {color: #888;
}.musiclist-singer {font-size: 24rpx;color: #888;
}.playing view, .playing text {color: #d43c33;
}

歌曲列表页面实现

新建musiclist歌曲列表页面

在musiclist.json 中引入musiclist自定义组件

{"usingComponents": {"x-musiclist": "/components/musiclist/musiclist"}
}

musiclist.wxml ：

<view class='detail-container' style='background: url({{listInfo.coverImgUrl}}) no-repeat  top/cover'></view>
<view class='detail-mask'></view>
<view class='detail-info'><image src="{{listInfo.coverImgUrl}}" class='detail-img'></image><view class='detail'><view class='detail-nm'>{{listInfo.name}}</view></view>
</view><x-musiclist musiclist="{{musiclist}}" />

musiclist.wxss :

.detail-container {height: 320rpx;filter: blur(40rpx);opacity: 0.4;
}.detail-mask {position: absolute;width: 100%;height: 320rpx;background-color: #333;top: 0;left: 0;z-index: -1;
}.detail-img {width: 280rpx;height: 280rpx;margin-right: 24rpx;border-radius: 6rpx;
}.detail-info {display: flex;position: absolute;top: 0;left: 0;width: 100%;height: 320rpx;padding: 20rpx;box-sizing: border-box;align-items: center;
}.detail {flex-grow: 1;line-height: 60rpx;width: 0;
}.detail view {color: #fff;font-size: 24rpx;
}.detail .detail-nm {font-size: 36rpx;font-weight: 400;
}

musiclist.js :

// pages/musiclist/musiclist.js
Page({/*** 页面的初始数据*/data: {musiclist: [],listInfo: {},},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {console.log(options)wx.showLoading({title: '加载中',})//调用music云函数的musiclist路由，获取歌曲列表数据wx.cloud.callFunction({name: 'music',data: {playlistId: options.playlistId,$url: 'musiclist'}}).then((res) => {console.log(res)const pl = res.result.playlistthis.setData({//歌单详情中的歌曲列表数据musiclist: pl.tracks,//歌单封面和歌单名listInfo: {coverImgUrl: pl.coverImgUrl,name: pl.name,}})wx.hideLoading()})},
})

实现效果如下：

微信小程序歌曲列表页实现相关推荐

新闻列表页flex_微信小程序新闻网站列表页
javascript 技术文章开发微信小程序新闻网站列表页在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属 ...
微信小程序实现列表页的点赞和取消点赞功能！
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; va ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
手把手教你做短视频去水印微信小程序（2-首页）
手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...
微信小程序多级列表绑定
微信小程序多级列表绑定 1.wxml <view class="weui-form-preview margin-bottom" wx:key="" wx ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...

微信小程序歌曲列表页实现

文章目录

页面跳转

添加云函数路由

musiclist自定义组件

歌曲列表页面实现

微信小程序歌曲列表页实现相关推荐

最新文章

热门文章