为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第11天 浮动居中方案-通过left和top定位音乐图标,小程序音乐播放 API 介绍

标签:
小程序

课程名称:微信小程序入门与实战(全新版)

课程章节:浮动居中方案-通过left和top定位音乐图标,小程序音乐播放 API 介绍,小试音乐播放API

主讲老师:7七月

课程内容:

今天学习的内容包括: 浮动居中方案-通过left和top定位音乐图标,小程序音乐播放 API 介绍,小试音乐播放API


设置 position: absolute 可以让图片脱离文档流。脱离文档流后可以用 left 和 top 两个属性设置位置。设置  margin-left 为图片宽度的一半。

   

以下是示例代码:

.audio {
    width: 102rpx;
    height: 110rpx;
    position: absolute;  
    left: 50%; 
    margin-left: -51rpx; 
    top: 150rpx;
}


除了这种设置写法外还有一种免去计算,更不易出错的写法:

.audio{    
    width: 102rpx;    
    height: 110rpx;    
    position: absolute;    
    left: 50%;    
    top: 150rpx;    
    transform: translate(-50%, -50%);
}


介绍了微信小程序官方内置的音乐 API,比如: 背景音频 API BackgroundAudioManager。这部分改动比较多,要用的时候可以直接去看文档。

背景音乐示例代码:

onMusic(event){        
    const mgr = wx.getBackgroundAudioManager();        
    mgr.src = postList[0].music.url;        
    mgr.title = postList[0].music.title;        
    console.log(mgr);       
},


课程收获:

今天又学习了一种新的官方内置接口, wx.getBackgroundAudioManager()。不知不觉微信小程序入门与实战这门课程的学习进度已经过半了,今天学会了调用背景音乐接口,可以把小程序当作一个迷你播放器了。

今日课程学习时间大约花费 17 分钟,明天周日接着努力。

https://img2.sycdn.imooc.com/62f7c6f40001b73413310831.jpg

https://img2.sycdn.imooc.com/62f7c6f40001749019180938.jpg


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消