承接上一篇progress，slider才是主角
微信官方提供的slider功能有限，無法滿足音頻播放所需要用到的全部功能，所以這里寫了一個自定義slider組件滿足業(yè)務開發(fā)中的需求。寫的很粗糙，不足之處請指正！
改組件主要提供以下功能
1、可自定義滑塊（圖片或自定義視圖），默認為和官方一樣的白色圓形
2、劃出緩沖范圍自動回滾
3、漸變前景色
下面主要講講這幾個功能的實現(xiàn)用法和注意事項，其他功能請下載文末的demo查看
不知道怎么使用自定義組件的同學，可以查看我的上一篇文章progress
1、實現(xiàn)滑塊的點擊滑動,主要用到下面五個方法
bindtap='sliderTap'
bindtouchstart='sliderStart'
bindtouchmove='sliderChange'
bindtouchend='sliderEnd'
bindtouchcancel='sliderCancel'
在js文件中將這五個方法拋出，讓使用該組件的頁面可以監(jiān)聽到這些方法
自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項：
以上五個方法都要使用triggerEvent 監(jiān)聽
sliderStart: function (e) {
if (!this.data.disabled) {
let detail = e.changedTouches;
let option = {};
this.triggerEvent('sliderStart', detail, option);
}
},
2、在這個組件中把默認滑塊的大小規(guī)定在[20, 40]rpx之間。有兩個地方需要作出限制
2.1、css文件 設置滑塊的上下限
max-width: 40rpx;
max-height: 40rpx;
min-width: 20rpx;
min-height: 20rpx;
2.2、js文件 在attached方法中對滑塊大小作出限制
let blockSize = this.data.blockSize;
if (blockSize > 40) {
this.setData({
blockSize: 40
})
} else if (blockSize < 20) {
this.setData({
blockSize: 20
})
}
3、還有一個值得注意的地方是，在使用該組件的時候要設置slider距離屏幕左邊的距離,這個距離填寫你項目中的實際距離即可
slider-left='75'
4、該組件所用到的單位均為rpx
5、參數(shù)釋義：
width: slider和progress 長度
strokeWidth: slider和progress 寬度
radius: slider和progress圓角
bufferColor: 緩沖條顏色
percent: 緩沖條百分比
backgroundColor: progress背景色
activeColor: slider前景色
value: 當前值
max: 最大值
blockSrc: 圖片滑塊地址
blockImageWidth: 圖片滑塊寬
blockImageHeight: 圖片滑塊高
blockSize: 默認滑塊大小
blockColor: 默認滑塊顏色
isCustom: 是否自定義滑塊 自定義滑塊必須設置isCustom為true
6、下面放一些該組件實例圖文
7、沒有寫時間組件，所以時間要自己加哦
8、下一篇文章audio是一個音頻播放實例
下載地址: demo
