From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-slider/mpother.js | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 113 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-slider/mpother.js b/minipro_standard/uni_modules/uview-ui/components/u-slider/mpother.js
new file mode 100644
index 0000000..040c848
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-slider/mpother.js
@@ -0,0 +1,113 @@
+/**
+ * 浣跨敤鏅�氱殑js鏂规瀹炵幇slider
+ */
+export default {
+ watch: {
+ value(n) {
+ // 鍙湁鍦ㄩ潪婊戝姩鐘舵�佹椂锛屾墠鍙互閫氳繃value鏇存柊婊戝潡鍊硷紝杩欓噷鐩戝惉锛屾槸涓轰簡璁╃敤鎴疯Е鍙�
+ if (this.status === 'end') {
+ this.updateSliderPlacement(n, true)
+ }
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ this.getSliderRect()
+ },
+ // 鑾峰彇slider灏哄
+ getSliderRect() {
+ // 鑾峰彇婊戝潡鏉＄殑灏哄淇℃伅
+ setTimeout(() => {
+ this.$uGetRect('.u-slider').then((rect) => {
+ this.sliderRect = rect
+ this.updateSliderPlacement(this.value, true)
+ })
+ }, 10)
+ },
+ // 鏄惁鍙互鎿嶄綔
+ canNotDo() {
+ return this.disabled
+ },
+ // 鑾峰彇褰撳墠鎵嬪娍鐐圭殑X杞翠綅绉诲��
+ getTouchX(e) {
+ return e.touches[0].clientX
+ },
+ formatStep(value) {
+ // 绉诲姩鐐瑰崰鎬婚暱搴︾殑鐧惧垎姣�
+ return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+ },
+ // 鍙戝嚭浜嬩欢
+ emitEvent(event, value) {
+ this.$emit(event, value || this.value)
+ },
+ // 鏍囪褰撳墠鎵嬪娍鐨勭姸鎬�
+ setTouchStatus(status) {
+ this.status = status
+ },
+ onTouchStart(e) {
+ if (this.canNotDo()) {
+ return
+ }
+ // 鏍囩ず褰撳墠鐨勭姸鎬佷负寮�濮嬭Е鎽告粦鍔�
+ this.emitEvent('start')
+ this.setTouchStatus('start')
+ },
+ onTouchMove(e) {
+ if (this.canNotDo()) {
+ return
+ }
+ // 婊戝潡鐨勫乏杈逛笉涓�瀹氳窡灞忓箷宸﹁竟鎺ュ￥锛屾墍浠ラ渶瑕佸噺鍘绘渶澶栧眰鐖跺厓绱犵殑宸﹁竟鍊�
+ const x = this.getTouchX(e)
+ const { left, width } = this.sliderRect
+ const distanceX = x - left
+ // 鑾峰緱绉诲姩璺濈瀵规暣涓粦鍧楃殑鐧惧垎姣斿�硷紝姝や负甯︽湁澶氫綅灏忔暟鐨勫�硷紝涓嶈兘鐢ㄦ鏇存柊瑙嗗浘
+ // 鍚﹀垯閫犳垚閫氫俊闃诲锛岄渶瑕佹瘡鏀瑰彉涓�涓猻tep鍊兼椂淇敼涓�娆¤鍥�
+ const percent = (distanceX / width) * 100
+ this.setTouchStatus('moving')
+ this.updateSliderPlacement(percent, true, 'moving')
+ },
+ onTouchEnd() {
+ if (this.canNotDo()) {
+ return
+ }
+ this.emitEvent('end')
+ this.setTouchStatus('end')
+ },
+ // 璁剧疆婊戠偣鐨勪綅缃�
+ updateSliderPlacement(value, drag, event) {
+ // 鍘绘帀灏忔暟閮ㄥ垎锛屽悓鏃朵篃鏄step姝ヨ繘鐨勫鐞�
+ const { width } = this.sliderRect
+ const percent = this.formatStep(value)
+ // 璁剧疆绉诲姩鐨勫��
+ const barStyle = {
+ width: `${percent / 100 * width}px`
+ }
+ // 绉诲姩鏈熼棿鏃犻渶杩囨浮鍔ㄧ敾
+ if (drag === true) {
+ barStyle.transition = 'none'
+ } else {
+ // 闈炵Щ鍔ㄦ湡闂达紝鍒犳帀瀵硅繃娓′负绌虹殑澹版槑锛岃css涓殑澹版槑璧锋晥
+ delete barStyle.transition
+ }
+ // 淇敼value鍊�
+ this.$emit('input', percent)
+ // 浜嬩欢鐨勫悕绉�
+ if (event) {
+ this.emitEvent(event, percent)
+ }
+ this.barStyle = barStyle
+ },
+ onClick(e) {
+ if (this.canNotDo()) {
+ return
+ }
+ // 鐩存帴鐐瑰嚮婊戝潡鐨勬儏鍐碉紝璁＄畻鏂瑰紡涓巓nTouchMove鏂规硶鐩稿悓
+ const { left, width } = this.sliderRect
+ const value = ((e.detail.x - left) / width) * 100
+ this.updateSliderPlacement(value, false, 'click')
+ }
+ }
+}
--
Gitblit v1.9.3