小程序自定义slider,拖动控制音频播放进度

设计图是酱紫的...

 

 

 乍一看没毛病,很好!再看看

小程序自定义slider,拖动控制音频播放进度_第1张图片

 这个可拖拽进度条...貌似自带的slider不能改滑块啊,这不是刁难我胖虎?

再想一下需求:

会自己动;小程序自定义slider,拖动控制音频播放进度_第2张图片  还可以拖动;拖动需要在一定范围之内;拖动到哪后面变色!

emmm...我天才小熊猫有一千种实现方法!

就用movable-area+movable-view吧,它不是有个拖动的功能吗,设置属性还会自己动,然后获取到宽度和播放进度相互转换就可以了

滑块和滑动有了,但颜色怎么改呢,简单点,还是用原生的progress吧,

思路:音频播放进度---->滑块进度+进度条进度;

移动滑块进度----->进度条进度------>判断是否还在滑动,(计算下距离上次滑动时间)否--->音频跳转播放

嘿嘿嘿,这次没有代码,直接打开代码片段吧!https://developers.weixin.qq.com/s/HMEQnXm97h3v

TIP:发现android 真机环境下拖动的动画会再重现一遍!原因是在movable-view的bindchange方法中设置了x的值!在拖动的时候是无法再使用setData()的方法再改变x的值的!所以...优化一下,在bindtouchend方法中setData()就好啦,上面链接已更新!

 

你可能感兴趣的:(微信小程序,小程序UI)