這裡是改良的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 簽名 ...