微信小程式 slider模組 雙向滑動

2021-10-09 19:47:31 字數 1665 閱讀 8606

這裡是改良的slider滑塊,實現雙向滑動,也是乙個**的儲存

已0點到24點的時間範圍選擇為例

這是wxml頁面

}點 -->

}點 -->

} }

}點 - }點

這裡是wxss頁面

.buymian-slide

.buymian-title

.buymian-slide-title

.buymian-slide-slide

/* range */

.buymian-slide-contain

.buymian-slide-range

.slider-left, .slider-right

.showcontentbox

.show-max-content,.show-min-content

.show-max-content

.show-min-content text

.show-max-content text

.show-merge-content

.show-merge-content text

.flex

這裡是js

var util = require('../../../utils/util.js');

page(,

onload: function (options)

this.setdata()

},// 開始滑動

changestart: function (e) )

}if (idx === 1) )

} else if (idx === 2) )}},

// 正在滑動

changing: function (e) )

} else if (idx === 2) )

}// 當兩個數字相近時 數字合併 太靠近兩邊會取乙個足夠顯示的位置 15 85

if(this.data.showcontent2 - this.data.showcontent1 < this.data.closeto))

}else if(p < 15))

}else)

}}else)}},

changed: function (e) )

} else if (idx === 2) )

}if (this.data.slider1value === this.data.slider2value && this.data.slider2value === this.data.max) )

}if (this.data.slider1value === this.data.slider2value && this.data.slider2value === this.data.min) )

}this.drawcanvas();

}})

實現的核心思想在於兩個slider的位置拼接,slider1顯示的值永遠是0,但是slider2展示出來的資料永遠是最中心的值,看看change觸發的變化就能懂。

在這裡申明一下,靈感來自於:

微信小程式 slider元件

class tui slider head 設定step,當前設定步伐為5,當前值 view class tui slider box bindchange changeslider1 step 5 value view view class tui content class tui slider...

微信小程式slider元件使用詳解

效果圖 wxml 設定step,當前設定步伐為5,當前值 是否在右側顯示當前值 設定最大值 最小值 滑動選擇器設定名稱 www.cppcns.comi fl 選擇 程式設計客棧ndchanging changeslider4 value wxss tui slider head,tui slider...

微信小程式 微信支付模組

1 小程式登入介面 獲取openid 小程式登入 2 商戶端呼叫支付統一下單介面,返回預付單資訊 統一下單 3 小程式端顯示 客戶掃碼支付,小程式端鑑權調起支付,返回支付結果到小程式端 再次簽名 4 推送支付結果到小程式端 支付結果通知api 5 商戶查詢支付結果 查詢訂單api 注意點 1 簽名 ...