承接上一篇progress，slider才是主角
微信官方提供的slider功能有限，无法满足音频播放所需要用到的全部功能，所以这里写了一个自定义slider组件满足业务开发中的需求。写的很粗糙，不足之处请指正！
改组件主要提供以下功能
1、可自定义滑块（图片或自定义视图），默认为和官方一样的白色圆形
2、划出缓冲范围自动回滚
3、渐变前景色
下面主要讲讲这几个功能的实现用法和注意事项，其他功能请下载文末的demo查看
不知道怎么使用自定义组件的同学，可以查看我的上一篇文章progress
1、实现滑块的点击滑动,主要用到下面五个方法
bindtap='sliderTap'
bindtouchstart='sliderStart'
bindtouchmove='sliderChange'
bindtouchend='sliderEnd'
bindtouchcancel='sliderCancel'
在js文件中将这五个方法抛出，让使用该组件的页面可以监听到这些方法
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
以上五个方法都要使用triggerEvent 监听
sliderStart: function (e) {
if (!this.data.disabled) {
let detail = e.changedTouches;
let option = {};
this.triggerEvent('sliderStart', detail, option);
}
},
2、在这个组件中把默认滑块的大小规定在[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、参数释义：
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、下面放一些该组件实例图文
设置value 和 max
设置滑块大小
设置滑块颜色
图片滑块
7、没有写时间组件，所以时间要自己加哦
8、下一篇文章audio是一个音频播放实例
下载地址: demo
网友评论