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