From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 07 十一月 2023 15:47:13 +0800
Subject: [PATCH] bug
---
minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - 副本.js | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 180 insertions(+), 0 deletions(-)
diff --git "a/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js" "b/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js"
index e69de29..df62349 100644
--- "a/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js"
+++ "b/minipro_standard/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js"
@@ -0,0 +1,180 @@
+/**
+ * 浣跨敤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 {
+ // bindingx鐨勫洖璋冨�硷紝鐢ㄤ簬鍙栨秷缁戝畾
+ panEvent: null,
+ // 鏍囪鏄惁绉诲姩鐘舵��
+ moving: false,
+ // 浣嶇Щ鐨勫亸绉婚噺
+ 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()
+ },
+ // 鑾峰彇鑺傜偣淇℃伅
+ // 鑾峰彇slider灏哄
+ getSliderRect() {
+ // 鑾峰彇婊戝潡鏉＄殑灏哄淇℃伅
+ // 閫氳繃nvue鐨刣om妯″潡锛屾煡璇㈣妭鐐逛俊鎭�
+ setTimeout(() => {
+ dom.getComponentRect(this.$refs['slider'], res => {
+ this.sliderRect = res.size
+ this.initX()
+ })
+ }, 10)
+ },
+ // 鍒濆鍖栨寜閽綅缃�
+ initButtonStyle({
+ barStyle,
+ buttonWrapperStyle
+ }) {
+ this.barStyle = barStyle
+ this.buttonWrapperStyle = buttonWrapperStyle
+ },
+ emitEvent(event, value) {
+ this.$emit(event, value ? value : this.value)
+ },
+ formatStep(value) {
+ // 绉诲姩鐐瑰崰鎬婚暱搴︾殑鐧惧垎姣�
+ return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+ },
+ // 婊戝姩寮�濮�
+ onTouchStart(e) {
+ // 闃绘椤甸潰婊氬姩锛屽彲浠ヤ繚璇佸湪婊戝姩杩囩▼涓紝涓嶈椤甸潰鍙互涓婁笅婊氬姩锛岄�犳垚涓嶅ソ鐨勪綋楠�
+ e.stopPropagation && e.stopPropagation()
+ e.preventDefault && e.preventDefault()
+ if (this.moving || this.disabled) {
+ // 閲婃斁涓婁竴娆＄殑璧勬簮
+ if (this.panEvent?.token != 0) {
+ BindingX.unbind({
+ token: this.panEvent.token,
+ // pan涓烘墜鍔夸簨浠�
+ eventType: 'pan'
+ })
+ this.gesToken = 0
+ }
+ return
+ }
+
+ this.moving = true
+ this.touching = true
+
+ // 鑾峰彇鍏冪礌ref
+ const button = this.$refs['nvue-button'].ref
+ const gap = this.$refs['nvue-gap'].ref
+
+ const {
+ min,
+ max,
+ step
+ } = this
+ const {
+ left,
+ width
+ } = this.sliderRect
+
+ // 鍒濆鍊间负鏈鍋忕Щ閲弜锛屽姞涓婃鍋滄婊戝姩鏃剁殑缁撴潫鍊�
+ let exporession = `(${this.x} + x)`
+ // 灏嗗亸绉荤殑x鍊硷紝杞负鎬讳綅绉荤殑鐧惧垎姣斿�硷紝涓轰簡鍜宮in鍜宮ax杩涜鍒ゆ柇
+ exporession = `(${exporession} / ${width}) * 100`
+ if (step > 1) {
+ // 濡傛灉step姝ヨ繘澶т簬1锛岄渶瑕佽烦姝ワ紝鎵�浠ラ渶瑕佷娇鐢∕ath.round杩涜鍙栨暣
+ exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
+ } else {
+ // 褰搒tep=1鏃讹紝鏃犻渶璺虫锛屽厖鍒嗗埄鐢╞indingx鎬ц兘锛屾粦鍧楀疄鏃惰窡闅忔墜鍔匡紝杈惧埌涓濇粦鐨勬晥鏋�
+ exporession = `max(${min}, min(${exporession}, ${max}))`
+ }
+ // 灏嗙櫨鍒嗘瘮鏈�鍚庤浆鍖栦负瀵瑰簲鐨刾x鍊�
+ exporession = `${exporession} / 100 * ${width}`
+ // 鏈�澶у�间笉鍏佽瓒呰繃杞ㄨ抗鐨勫搴�
+ const {
+ sliderWidth
+ } = this.sliderRect
+ exporession = `min(${sliderWidth}, ${exporession})`
+ // 婊戝潡鐐规�绘槸闇�瑕佷竴涓乏鍋忕Щ鐨勫�硷紝涓鸿嚜韬搴︾殑涓�鍗�
+ const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
+ // 闃块噷涓轰簡KPI鑰屽紑婧愮殑BindingX
+ this.panEvent = BindingX.bind({
+ anchor: button,
+ eventType: 'pan',
+ props: [{
+ element: gap,
+ // 缁戝畾width灞炴�э紝璁剧疆鍏跺搴﹀��
+ property: 'width',
+ expression
+ }, {
+ element: button,
+ // 缁戝畾width灞炴�э紝璁剧疆鍏跺搴﹀��
+ property: 'transform.translateX',
+ expression: buttonExpression
+ }]
+ }, (e) => {
+ if (e.state === 'end' || e.state === 'exit') {
+ //
+ this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
+ // 鏍规嵁鍋忕Щ鍊硷紝寰楀嚭绉诲姩鐨勭櫨鍒嗘瘮锛岃繘鑰屼慨鏀瑰弻鍚戠粦瀹氱殑v-model鐨勫��
+ const value = (this.x / width) * 100
+ const percent = this.formatStep(value)
+ // 淇敼value鍊�
+ this.$emit('input', percent)
+ // 鏍囪涓嬩竴娆¤Е鍙憊alue鐨剋atch鏃讹紝杩欎釜鍊肩殑鍙樺寲锛屾槸鐢卞唴閮ㄦ敼鍙樼殑
+ this.changeFromInside = true
+ this.moving = false
+ this.touching = false
+ }
+ })
+ },
+ // 浠巚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
+ })
+ }
+ }
+}
--
Gitblit v1.9.3