• 2022年10月19日

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;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注