<template><view class="slider-container" :style="containerStyle" @touchmove.prevent><view ref="sliderHandle" class="slider-handle" :style="handleStyle" @touchstart="onTouchStart"@touchmove.stop="onTouchMove" @touchend="onTouchEnd"></view></view>
</template><script>export default {name: 'SliderControl',props: {mode: {type: String,default: 'horizontal'},width: {type: [Number, String],default: 220},height: {type: [Number, String],default: 60}},data() {return {position: 70,isDragging: false,startTouch: null,startPosition: null,lastUpdate: 0,lastEmittedValue: 0,currentDelta: 0,animationTimer: null}},methods: {onTouchStart(e) {uni.vibrateShort({success: () => {console.log('短振动成功');},fail: (err) => {console.error('短振动失败:', err);}});e.stopPropagation()if (this.animationTimer) {clearTimeout(this.animationTimer)this.animationTimer = null}const touch = e.changedTouches[0]if (!touch) returnthis.isDragging = truethis.startTouch = {x: touch.pageX,y: touch.pageY}this.startPosition = this.positionthis.lastUpdate = Date.now()this.currentDelta = 0},onTouchMove(e) {if (!this.isDragging || !this.startTouch) returne.stopPropagation()const now = Date.now()const timeDiff = now - this.lastUpdateif (timeDiff < 16) returnthis.lastUpdate = nowconst touch = e.changedTouches[0]if (!touch) returnconst delta = this.mode === 'horizontal' ?touch.pageX - this.startTouch.x :touch.pageY - this.startTouch.ythis.currentDelta = this.currentDelta + (delta - this.currentDelta) * 0.9let targetPos = this.startPosition + this.currentDelta * 1targetPos = Math.max(0, Math.min(targetPos, 180))if (Math.abs(targetPos - this.position) > 0.05) {const smoothFactor = Math.min(0.08, timeDiff / 250)this.position = this.position + (targetPos - this.position) * smoothFactor}const value = this.mode === 'horizontal' ?(this.position - 70) / 70 :(70 - this.position) / 70const roundedValue = Math.round(value * 100) / 100if (Math.abs(roundedValue - this.lastEmittedValue) >= 0.01) {this.lastEmittedValue = roundedValuethis.$emit('change', {value: Math.max(-1, Math.min(1, roundedValue))})}},onTouchEnd(e) {if (!this.isDragging) returne.stopPropagation()this.isDragging = falsethis.startTouch = nullthis.startPosition = nullthis.currentDelta = 0const startPos = this.positionconst startTime = Date.now()const duration = 500const easeOutQuart = t => 1 - Math.pow(1 - t, 4)const animate = () => {const elapsed = Date.now() - startTimeif (elapsed >= duration) {this.position = 70this.$emit('change', {value: 0})this.animationTimer = nullreturn}const progress = elapsed / durationconst easeProgress = easeOutQuart(progress)this.position = startPos + (70 - startPos) * easeProgressthis.animationTimer = setTimeout(animate, 16)}animate()}},beforeDestroy() {if (this.animationTimer) {clearTimeout(this.animationTimer)}},computed: {containerStyle() {return {width: typeof this.width === 'number' ? `${this.width}px` : this.width,height: typeof this.height === 'number' ? `${this.height}px` : this.height,backgroundColor: '#000000',borderRadius: '30px',position: 'relative'}},trackStyle() {if (this.mode === 'horizontal') {return {position: 'absolute',left: '20px',right: '20px',height: '2px',top: '30%',backgroundColor: 'rgba(255, 255, 255, 0.3)',transform: 'translateY(-1px)'}} else {return {position: 'absolute',top: '20px',bottom: '20px',width: '2px',left: '40%',backgroundColor: 'rgba(255, 255, 255, 0.3)',transform: 'translateX(-1px)'}}},handleStyle() {const baseStyle = {position: 'absolute',width: '50px',height: '50px',backgroundColor: '#FFFFFF',borderRadius: '30px'}if (this.mode === 'horizontal') {return {...baseStyle,transform: `translateX(${this.position}px)`,top: '0px'}} else {return {...baseStyle,transform: `translateY(${this.position}px)`,left: '0px'}}}}}
</script><style>.slider-container {flex: 1;position: relative;background-color: #000000;border-radius: 30px;}.slider-track {position: absolute;background-color: rgba(255, 255, 255, 0.3);}.slider-handle {position: absolute;background-color: #FFFFFF;}
</style>为这个代码创建一个文件SlidePlugin.vue
然后再其他页面进行调用：
<template>
<view><SlidePlugin mode="vertical":width="50":height="180"@change="sliderChange_ver"/>
</view>
</template>
<script>
import SlidePlugin from '@/components/SlidePlugin.vue'
export default {
components: {SlidePlugin}
}</script>官方提供的无法在一个页面同时滑动2个，所以自己做了一个，这个滑动后会自动返回中间位置，如果中间位置偏离，自己调整下