微信小程序 index-list无效

微信小程序 index-list无效,第1张

因该是程序或插件出错。

功能点击某一项,底部出现粉色边框 首先需要通过 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属性


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11911926.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存