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/nvue.js | 193 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 193 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue.js b/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue.js
index e69de29..344dce8 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue.js
+++ b/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue.js
@@ -0,0 +1,193 @@
+/**
+ * 浣跨敤bindingx鏂规瀹炵幇slider
+ * 鍙兘浣跨敤浜巒vue涓�
+ */
+// 寮曞叆bindingx锛屾搴撶被浼间簬寰俊灏忕▼搴弚xs锛岀洰鐨勬槸璁﹋s杩愯鍦ㄨ鍥惧眰锛屽噺灏戣鍥惧眰鍜岄�昏緫灞傜殑閫氫俊鎶樻崯
+const BindingX = uni.requireNativePlugin('bindingx')
+// nvue鎿嶄綔dom鐨勫簱锛岀敤浜庤幏鍙杁om鐨勫昂瀵镐俊鎭�
+const dom = uni.requireNativePlugin('dom')
+// nvue涓敤浜庢搷浣滃厓绱犲姩鐢荤殑搴擄紝绫讳技浜巙ni.animation锛屽彧涓嶈繃uni.animation涓嶈兘鐢ㄤ簬nvue
+const animation = uni.requireNativePlugin('animation')
+
+export default {
+ data() {
+ return {
+ // 浣嶇Щ鐨勫亸绉婚噺
+ x: 0,
+ // 鏄惁姝ｅ湪瑙︽懜杩囩▼涓紝鐢ㄤ簬鏍囪鍔ㄧ敾绫绘槸鍚︽坊鍔犳垨绉婚櫎
+ touching: false,
+ changeFromInside: false
+ }
+ },
+ watch: {
+ // 鐩戝惉vlaue鐨勫彉鍖栵紝姝ゅ彉鍖栧彲鑳芥槸鐢变簬鍐呴儴淇敼v-model鐨勫�硷紝鎴栬�呭閮�
+ // 浠庢湇鍔＄鑾峰彇涓�涓�煎悗锛岃祴鍊肩粰slider鐨剉-model鑰屽鑷寸殑
+ value(n) {
+ if (!this.changeFromInside) {
+ this.initX()
+ } else {
+ this.changeFromInside = false
+ }
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ // 鏇存柊婊戝潡灏哄淇℃伅
+ this.getSliderRect().then((size) => {
+ this.sliderRect = size
+ this.initX()
+ })
+ },
+ // 鑾峰彇鑺傜偣淇℃伅
+ // 鑾峰彇slider灏哄
+ getSliderRect() {
+ // 鑾峰彇婊戝潡鏉＄殑灏哄淇℃伅
+ // 閫氳繃nvue鐨刣om妯″潡锛屾煡璇㈣妭鐐逛俊鎭�
+ return new Promise((resolve) => {
+ this.$nextTick(() => {
+ dom.getComponentRect(this.$refs.slider, (res) => {
+ resolve(res.size)
+ })
+ })
+ })
+ },
+ // 鍒濆鍖栨寜閽綅缃�
+ initButtonStyle({
+ barStyle,
+ buttonWrapperStyle
+ }) {
+ this.barStyle = barStyle
+ this.buttonWrapperStyle = buttonWrapperStyle
+ },
+ emitEvent(event, value) {
+ this.$emit(event, value || this.value)
+ },
+ // 婊戝姩寮�濮�
+ async onTouchStart(e) {
+ // if (this.disabled) return
+ // // 闃绘椤甸潰婊氬姩锛屽彲浠ヤ繚璇佸湪婊戝姩杩囩▼涓紝涓嶈椤甸潰鍙互涓婁笅婊氬姩锛岄�犳垚涓嶅ソ鐨勪綋楠�
+ // e.stopPropagation && e.stopPropagation()
+ // e.preventDefault && e.preventDefault()
+ // // 鏇存柊婊戝潡鐨勫昂瀵镐俊鎭�
+ // this.sliderRect = await this.getSliderRect()
+ // // 鏍囪婊戝姩杩囩▼涓Е鎽哥偣鐨勪俊鎭�
+ // this.touchStart(e)
+ // this.startValue = this.format(this.value)
+ // this.dragStatus = 'start'
+
+ // 鏍囪婊戝姩杩囩▼涓Е鎽哥偣鐨勪俊鎭�
+ // this.touchStart(e)
+ },
+ // 寮�濮嬫粦鍔�
+ onTouchMove(e) {
+ // if (this.disabled) return;
+ // if (this.dragStatus === 'start') {
+ // this.$emit('drag-start')
+ // }
+ // // 鏍囪褰撳墠婊戝姩杩囩▼涓殑瑙︾偣淇℃伅锛屾鏂规硶鍦╰ouch mixin涓�
+ // this.touchMove(e)
+ // this.dragStatus = 'draging'
+ // const {
+ // width: sliderWidth
+ // } = this.sliderRect
+ // const diff = (this.deltaX / sliderWidth) * this.getRange()
+ // this.newValue = this.startValue + diff
+ // this.updateValue(this.newValue, false, true)
+ // 鑾峰彇鍏冪礌ref
+ // const button = this.$refs['nvue-button'].ref
+ // const gap = this.$refs['nvue-gap'].ref
+
+ // animation.transition(gap, {
+ // styles: {
+ // width: `${this.startX + this.deltaX}px`
+ // }
+ // })
+ // // console.log(this.startX + this.deltaX);
+ // animation.transition(button, {
+ // styles: {
+ // transform: `translateX(${this.startX + this.deltaX}px)`
+ // }
+ // })
+ // this.barStyle = {
+ // width: `${this.startX + this.deltaX}px`
+ // }
+ const {
+ x
+ } = this.getTouchPoint(e)
+ this.buttonWrapperStyle = {
+ transform: `translateX(${x}px)`
+ }
+ // this.buttonWrapperStyle = {
+ // transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
+ // }
+ },
+ // onTouchEnd() {
+ // if (this.disabled) return;
+ // if (this.dragStatus === 'draging') {
+ // this.updateValue(this.newValue, true)
+ // this.$emit('drag-end');
+ // }
+ // },
+ updateValue(value, end, drag) {
+ value = this.format(value)
+ const {
+ width: sliderWidth
+ } = this.sliderRect
+ const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
+ this.value = value
+ this.barStyle = {
+ width: `${width}px`
+ }
+ // console.log('width', width);
+ if (drag) {
+ this.$emit('drag', {
+ value
+ })
+ }
+ if (end) {
+ this.$emit('change', value)
+ }
+ if ((drag || end)) {
+ this.changeFromInside = true
+ this.$emit('update', value)
+ }
+ },
+ // 浠巚alue鐨勫彉鍖栵紝鍊掓帹寰楀嚭x鐨勫�艰涓哄灏�
+ initX() {
+ const {
+ left,
+ width
+ } = this.sliderRect
+ // 寰楀嚭x鐨勫垵濮嬪亸绉诲�硷紝涔嬫墍浠ラ渶瑕佽繖涔堝仛锛屾槸鍥犱负鍦╞indingX涓紝瑙︽懜婊戝姩鏃讹紝鍙兘鐨勫�兼湰娆＄Щ鍔ㄧ殑鍋忕Щ鍊�
+ // 鑰屾棤娉曠殑鍊煎噯纭殑鍓嶅悗绉诲姩鐨勪袱涓偣鐨勫潗鏍囧�硷紝weex绾补涓洪樋閲屽反宸寸殑KPI(閮ㄩ棬涓氱哗鑰冩牳)浜х墿锛屼篃灏辫繖鏍蜂簡
+ this.x = this.value / 100 * width
+ // 璁剧疆绉诲姩鐨勫��
+ const barStyle = {
+ width: `${this.x}px`
+ }
+ // 鎸夐挳鐨勫垵濮嬪��
+ const buttonWrapperStyle = {
+ transform: `translateX(${this.x - this.blockHeight / 2}px)`
+ }
+ this.initButtonStyle({
+ barStyle,
+ buttonWrapperStyle
+ })
+ },
+ // 绉诲姩鐐瑰崰鎬婚暱搴︾殑鐧惧垎姣旓紝姝ゅ闇�瑕佸厛闄や互step锛屾槸涓轰簡淇濊瘉step澶т簬1鏃讹紝姣斿10锛岄偅涔堝湪婊戝姩11,12px杩欐牱鐨�
+ // 璺濈鏃讹紝瀹為檯涓婃粦鍧楁槸涓嶄細婊戝姩鐨勶紝鍒颁簡16,17px锛岀粡杩囧洓鑸嶄簲鍏ュ悗锛屽氨鍙樻垚浜�20px锛岃繘琛屼簡涓嬩竴涓烦鍙�
+ format(value) {
+ return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
+ },
+ getRange() {
+ const {
+ max,
+ min
+ } = this
+ return max - min
+ }
+ }
+}
--
Gitblit v1.9.3