一、音乐界面最上层的滑动banner本次由于态度没摆正,晚上又跟我的指路明灯学长聊天到八点多。然后又跟我的迷途羔羊说了会话!然后花了半个多小时测评一个免费的VPN (具体情形请去看我的另一篇文章)再来搞开发就是十点半了。时间不是很多,所以调教好的Bug也不多,但是还是有的!
原本采用自己写函数的方式来触发,后来改用官方组件--swiper 进行调控:
效果图,设置为两次一次的转换
改进代码如下(github未更新,请读者自行更改)
- 《---music.wxml》
- <swiper class="swiper" indicator-dots="{{indicatorDots}}"
- autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
- <swiper-item wx:for="{{imgUrls}}">
- <image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
- </swiper-item>
- </swiper>
《---music.js》
- Page(
- {
- onReady: function (e) {
- // 使用 wx.createAudioContext 获取 audio 上下文 context
- this.audioCtx = wx.createAudioContext('myAudio')
- },
- data: {
- count:1,
- imgUrls: [
- 'https://159.203.250.111/banner1.png',
- 'https://159.203.250.111/banner2.png',
- 'https://159.203.250.111/banner3.png',
- ],
- indicatorDots: false,
- autoplay: true,
- interval: 2000,
- duration: 1000,
- },
- audioPlay: function () {
- this.audioCtx.play()
- },
- audioPause: function () {
- this.audioCtx.pause()
- },
- audio14: function () {
- this.audioCtx.seek(14)
- },
- audioStart: function () {
- this.audioCtx.seek(0)
- },
- changeIndicatorDots: function(e) {
- this.setData({
- indicatorDots: !this.data.indicatorDots
- })
- },
- changeAutoplay: function(e) {
- this.setData({
- autoplay: !this.data.autoplay
- })
- },
- intervalChange: function(e) {
- this.setData({
- interval: e.detail.value
- })
- },
- durationChange: function(e) {
- this.setData({
- duration: e.detail.value
- })
- },
- onShareAppMessage: function () {
- return {
- title: '欢迎使用颜大傻牌音乐播放器',
- desc: '将你正在听的歌分享到~~~',
- path: '/page/music/music.js'
- }
- },
- })
二、增置了上一首下一首切歌功能
目前还在调试,官方给定的逻辑选择模块我还没吃透。敬请见谅!目前有了一点头绪,代码在下面。(PS:最新消息,制作成功!哈哈。可以流利的播放各种音乐了!!!我还在制作目录,请诸君稍后!)
《---music.wxml》
- <block wx:for="{{song}}" wx:key="id">
- <block wx:if="{{item.musicid==count}}">
- <audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true" >
- <button plain="true" type="primary" bindtap="audioPlay" class="button_anniu">开始播放</button>
- <button type="primary" bindtap="audioPause" class="button_anniu">暂停</button>
- <button type="primary" bindtap="audio14" class="button_anniu">设置当前播放时间为14秒</button>
- <button type="primary" bindtap="audioStart" class="button_anniu">停止</button>
- <button bindtap="NextMusic" class="button_anniu"> 上一首 </button>
- <button bindtap="LastMusic" class="button_anniu"> 下一首 </button>
- </audio>
- </block>
- </block>
《---music.js》
- data: {
- song:[{
- musicid:1,
- poster:'https://159.203.250.111/Carly.png',
- name:'Call_Me_Baby',
- author: 'Carly_Rae_Jepsen',
- src:'https://159.203.250.111/Call_Me_Baby.mp3',
- },
- {
- musicid:2,
- poster:'https://159.203.250.111/carly.png',
- name:'Good_Time',
- author: 'Carly_Rae_Jepsen',
- src:'https://159.203.250.111/Good_Time.mp3',
- },
- { musicid:3,
- poster:'https://159.203.250.111/five1.png',
- name:'Maps',
- author: 'Marron 5',
- src:'https://159.203.250.111/maps.mp3',
- },
- { musicid:4,
- poster:'https://159.203.250.111five2.png',
- name:'Animals',
- author: 'Marron 5',
- src:'https://159.203.250.111/Animals.mp3',
- },
- { musicid:5,
- poster:'https://159.203.250.111/five3.png',
- name:'Sugar',
- author: 'Marron 5',
- src:'https://159.203.250.111/Sugar.mp3',
- },
- ],
- count:1,
- imgUrls: [
- 'https://159.203.250.111/banner1.png',
- 'https://159.203.250.111/banner2.png',
- 'https://159.203.250.111/banner3.png',
- ],
- indicatorDots: false,
- autoplay: true,
- interval: 2000,
- duration: 1000,
- },
- audioPlay: function () {
- this.audioCtx.play()
- },
- audioPause: function () {
- this.audioCtx.pause()
- },
- audio14: function () {
- this.audioCtx.seek(14)
- },
- audioStart: function () {
- this.audioCtx.seek(0)
- },
- NextMusic: function(e) {
- this.setData({
- count: this.data.count + 1
- })
- },
- LastMusic: function(e) {
- this.setData({
- count: this.data.count - 1
- })
- },
- onShareAppMessage: function () {
- return {
- title: '欢迎使用颜大傻牌音乐播放器',
- desc: '将你正在听的歌分享到~~~',
- path: '/page/music/music.js'
- }
- },
- })