uniapp使用@touchmove配合view实现滑动条
开发智能文字转语音小程序需要设置音量、语速、语调等参数,考虑使用滑动条实现,然而uniapp并没有直接滑动条的组件,因此使用view配合touchmove来实现。
<view class="cu-progress round" id="vol" @touchmove="ChangeVol">
<view class="bg-green" :style="[{ width: voicePar.vol+'%'}]"></view>
</view>
页面加载初始化代码
onLoad(){
uni.createSelectorQuery().in(this).select('#vol').boundingClientRect(data => {
this.progWidth = data.width
}).exec()
}
修改音量js代码
ChangeVol(e) {
console.log(e.target)
let v = Math.trunc(100 * (e.changedTouches[0].pageX - e.target.offsetLeft) / this.progWidth);
if (v > 100) {
v = 100
} else if (v < 0) {
v = 0
} else {
}
this.voicePar.vol = v;
}