微信小程序进度条组件自定义数字_微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放...

小程序自定义音频组件，带滚动条

摘要：首先自定义音频组件，是因为产品有这样的需求，需要如下样式的

而微信小程序API给我们提供的就是这样的

而且产品需要小程序有后台播放功能，所以我们不考虑小程序的 audio 组件，即使官方推荐更强大的  wx.createInnerAudioContext 但是不符合需求，所以这里用到的是 backgroundAudioManager()

分析一下：这个页面构成，主要就是进度条和一些icon，进度条之前我自定义了一版，但是效果不理想，最后重构了页面，所以这里用的就是 slider 滑动选择器 https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

audio.wxml

{ {current_process}}

bindchange="hanle_slider_change"

bindtouchstart="handle_slider_move_start"

bindtouchend="handle_slider_move_end"

min="0"

block-size="16"

max="{ {slider_max}}"

activeColor="#fff"

backgroundColor="rgba(255,255,255,.3)"

value="{ {slider_value}}"

/>

{ {total_process}}

滑动事件 bindchange="hanle_slider_change"

开始滑动 bindtouchstart="handle_slider_move_start"

停止滑动 bindtouchend="handle_slider_move_end"

audio.wxss

.audio {

position: relative;

width: 750rpx;

height: 640rpx;

padding: 60rpx 32rpx 52rpx;

box-sizing: border-box;

text-align: center;

overflow: hidden;

background: rgba(0,0,0,.18);

}

.audio .bg {

position: absolute;

top: 0;

left: -100%;

bottom: 0;

right: 0;

margin: auto;

width: 300%;

height: 300%;

z-index: -1;

filter: blur(40rpx);

}

.editor {

padding: 32rpx;

box-sizing: border-box;

color: #333;

font-size: 28rpx;

background: #fff;

}