功能点击某一项,底部出现粉色边框 首先需要通过 bindtap 为每一个item项绑定一个点击事件,其次需要添加自定义属性 data-* = {{index}} ,以便在函数中获取到被点击item项的index索引值。或者是删除卸载重新下载。
CSDN博客名:ColorKin
尽量不要用缓存去写,四月份的时候写的那篇因为当时是新手,只会那么写
效果展示:点击编辑,进入编辑页
第一页编辑按钮:
<view class="bj-btn" bindtap="redactGroup" data-id="{{传递的id}}">编辑</view>
redactGroup方法:
options.currentTarget.dataset.前面自定义的名字
redactGroup(options){
let id = options.currentTarget.dataset.id
wx.navigateTo({
url: '../redact_group/redact_group?id=' + id
})
}
第二页的onLoad函数来接收传递过来的id,然后再次请求获得数据
onLoad: function (options) {
console.log("options-------",options.id)
let _id = options.id
this.函数名(_id)
},
虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).
主要实现的功能有:
1.实现音频播放,暂停
2.实现拖拽进度条,快进音频进度
3.实现上一首,下一首,列表循环播放
4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试
一丶index.js
数据初始化
playMusic 切换播放歌曲的方法.
countTimeDown 循环计时,进度展示
sliderChange slider的拖拽事件
lastMusic 上一首
playOrpause 中间的按钮,播放/暂停切换
nextMusic 下一首
listClick 列表点击事件
界面切换,时长格式化
二丶index.wxml
三丶index.wxss
四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)