uniapp 自界说的滑杆（支持一个屏幕2个滑杆同时滑动） ...

1. <template>
2.         <view class="slider-container" :style="containerStyle" @touchmove.prevent>
4.                 <view ref="sliderHandle" class="slider-handle" :style="handleStyle" @touchstart="onTouchStart"
5.                         @touchmove.stop="onTouchMove" @touchend="onTouchEnd"></view>
6.         </view>
7. </template>
9. <script>
10.         export default {
11.                 name: 'SliderControl',
13.                 props: {
14.                         mode: {
15.                                 type: String,
16.                                 default: 'horizontal'
17.                         },
18.                         width: {
19.                                 type: [Number, String],
20.                                 default: 220
21.                         },
22.                         height: {
23.                                 type: [Number, String],
24.                                 default: 60
25.                         }
26.                 },
28.                 data() {
29.                         return {
30.                                 position: 70,
31.                                 isDragging: false,
32.                                 startTouch: null,
33.                                 startPosition: null,
34.                                 lastUpdate: 0,
35.                                 lastEmittedValue: 0,
36.                                 currentDelta: 0,
37.                                 animationTimer: null
38.                         }
39.                 },
41.                 methods: {
42.                         onTouchStart(e) {
43.                                 uni.vibrateShort({
46.                                         success: () => {
47.                                                 console.log('短振动成功');
48.                                         },
49.                                         fail: (err) => {
50.                                                 console.error('短振动失败:', err);
51.                                         }
52.                                 });
53.                                 e.stopPropagation()
54.                                 if (this.animationTimer) {
55.                                         clearTimeout(this.animationTimer)
56.                                         this.animationTimer = null
57.                                 }
59.                                 const touch = e.changedTouches[0]
60.                                 if (!touch) return
62.                                 this.isDragging = true
63.                                 this.startTouch = {
64.                                         x: touch.pageX,
65.                                         y: touch.pageY
66.                                 }
67.                                 this.startPosition = this.position
68.                                 this.lastUpdate = Date.now()
69.                                 this.currentDelta = 0
70.                         },
72.                         onTouchMove(e) {
73.                                 if (!this.isDragging || !this.startTouch) return
74.                                 e.stopPropagation()
76.                                 const now = Date.now()
77.                                 const timeDiff = now - this.lastUpdate
78.                                 if (timeDiff < 16) return
79.                                 this.lastUpdate = now
81.                                 const touch = e.changedTouches[0]
82.                                 if (!touch) return
84.                                 const delta = this.mode === 'horizontal' ?
85.                                         touch.pageX - this.startTouch.x :
86.                                         touch.pageY - this.startTouch.y
88.                                 this.currentDelta = this.currentDelta + (delta - this.currentDelta) * 0.9
89.                                 let targetPos = this.startPosition + this.currentDelta * 1
91.                                 targetPos = Math.max(0, Math.min(targetPos, 180))
93.                                 if (Math.abs(targetPos - this.position) > 0.05) {
94.                                         const smoothFactor = Math.min(0.08, timeDiff / 250)
95.                                         this.position = this.position + (targetPos - this.position) * smoothFactor
96.                                 }
100.                                 const value = this.mode === 'horizontal' ?
101.                                         (this.position - 70) / 70 :
102.                                         (70 - this.position) / 70
104.                                 const roundedValue = Math.round(value * 100) / 100
105.                                 if (Math.abs(roundedValue - this.lastEmittedValue) >= 0.01) {
106.                                         this.lastEmittedValue = roundedValue
107.                                         this.$emit('change', {
108.                                                 value: Math.max(-1, Math.min(1, roundedValue))
109.                                         })
110.                                 }
111.                         },
113.                         onTouchEnd(e) {
114.                                 if (!this.isDragging) return
115.                                 e.stopPropagation()
117.                                 this.isDragging = false
118.                                 this.startTouch = null
119.                                 this.startPosition = null
120.                                 this.currentDelta = 0
122.                                 const startPos = this.position
123.                                 const startTime = Date.now()
124.                                 const duration = 500
126.                                 const easeOutQuart = t => 1 - Math.pow(1 - t, 4)
128.                                 const animate = () => {
129.                                         const elapsed = Date.now() - startTime
130.                                         if (elapsed >= duration) {
131.                                                 this.position = 70
132.                                                 this.$emit('change', {
133.                                                         value: 0
134.                                                 })
135.                                                 this.animationTimer = null
136.                                                 return
137.                                         }
139.                                         const progress = elapsed / duration
140.                                         const easeProgress = easeOutQuart(progress)
141.                                         this.position = startPos + (70 - startPos) * easeProgress
143.                                         this.animationTimer = setTimeout(animate, 16)
144.                                 }
146.                                 animate()
147.                         }
148.                 },
150.                 beforeDestroy() {
151.                         if (this.animationTimer) {
152.                                 clearTimeout(this.animationTimer)
153.                         }
154.                 },
156.                 computed: {
157.                         containerStyle() {
158.                                 return {
159.                                         width: typeof this.width === 'number' ? `${this.width}px` : this.width,
160.                                         height: typeof this.height === 'number' ? `${this.height}px` : this.height,
161.                                         backgroundColor: '#000000',
162.                                         borderRadius: '30px',
163.                                         position: 'relative'
164.                                 }
165.                         },
167.                         trackStyle() {
168.                                 if (this.mode === 'horizontal') {
169.                                         return {
170.                                                 position: 'absolute',
171.                                                 left: '20px',
172.                                                 right: '20px',
173.                                                 height: '2px',
174.                                                 top: '30%',
175.                                                 backgroundColor: 'rgba(255, 255, 255, 0.3)',
176.                                                 transform: 'translateY(-1px)'
177.                                         }
178.                                 } else {
179.                                         return {
180.                                                 position: 'absolute',
181.                                                 top: '20px',
182.                                                 bottom: '20px',
183.                                                 width: '2px',
184.                                                 left: '40%',
185.                                                 backgroundColor: 'rgba(255, 255, 255, 0.3)',
186.                                                 transform: 'translateX(-1px)'
187.                                         }
188.                                 }
189.                         },
191.                         handleStyle() {
192.                                 const baseStyle = {
193.                                         position: 'absolute',
194.                                         width: '50px',
195.                                         height: '50px',
196.                                         backgroundColor: '#FFFFFF',
197.                                         borderRadius: '30px'
198.                                 }
200.                                 if (this.mode === 'horizontal') {
201.                                         return {
202.                                                 ...baseStyle,
203.                                                 transform: `translateX(${this.position}px)`,
204.                                                 top: '0px'
205.                                         }
206.                                 } else {
207.                                         return {
208.                                                 ...baseStyle,
209.                                                 transform: `translateY(${this.position}px)`,
210.                                                 left: '0px'
211.                                         }
212.                                 }
213.                         }
214.                 }
215.         }
216. </script>
218. <style>
219.         .slider-container {
220.                 flex: 1;
221.                 position: relative;
222.                 background-color: #000000;
223.                 border-radius: 30px;
224.         }
226.         .slider-track {
227.                 position: absolute;
228.                 background-color: rgba(255, 255, 255, 0.3);
229.         }
231.         .slider-handle {
232.                 position: absolute;
233.                 background-color: #FFFFFF;
234.         }
235. </style>

复制代码

为这个代码创建一个文件SlidePlugin.vue
然后再其他页面进行调用：

1. <template>
2. <view>
3.     <SlidePlugin
4.                                   mode="vertical"
5.                                   :width="50"
6.                                   :height="180"
7.                                   @change="sliderChange_ver"
8.                                 />
9. </view>
10. </template>
11. <script>
12. import SlidePlugin from '@/components/SlidePlugin.vue'
13. export default {
14. components: {
15.                        
16.                         SlidePlugin
17.                 }
18. }
20. </script>

复制代码

官方提供的无法在一个页面同时滑动2个，所以自己做了一个，这个滑动后会自动返回中心位置，假如中心位置偏离，自己调整下

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。