承接上一篇progress耳高，slider才是主角
微信官方提供的slider功能有限蝇率，無(wú)法滿足音頻播放所需要用到的全部功能考润，所以這里寫(xiě)了一個(gè)自定義slider組件滿足業(yè)務(wù)開(kāi)發(fā)中的需求拥坛。寫(xiě)的很粗糙蓬蝶，不足之處請(qǐng)指正尘分！
改組件主要提供以下功能
1、可自定義滑塊（圖片或自定義視圖）丸氛，默認(rèn)為和官方一樣的白色圓形
2培愁、劃出緩沖范圍自動(dòng)回滾
3、漸變前景色
下面主要講講這幾個(gè)功能的實(shí)現(xiàn)用法和注意事項(xiàng)缓窜，其他功能請(qǐ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è)方法拋出禾锤，讓使用該組件的頁(yè)面可以監(jiān)聽(tīng)到這些方法
自定義組件觸發(fā)事件時(shí)香罐，需要使用 triggerEvent 方法，指定事件名时肿、detail對(duì)象和事件選項(xiàng)：
以上五個(gè)方法都要使用triggerEvent 監(jiān)聽(tīng)
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方法中對(duì)滑塊大小作出限制
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ě)你項(xiàng)目中的實(shí)際距離即可
slider-left='75'
4宁炫、該組件所用到的單位均為rpx
5、參數(shù)釋義：
width: slider和progress 長(zhǎng)度
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羔巢、沒(méi)有寫(xiě)時(shí)間組件，所以時(shí)間要自己加哦
8罩阵、下一篇文章audio是一個(gè)音頻播放實(shí)例
下載地址: demo
