123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- const BindingX = uni.requireNativePlugin('bindingx')
- const dom = uni.requireNativePlugin('dom')
- const animation = uni.requireNativePlugin('animation')
- export default {
- data() {
- return {
-
- panEvent: null,
-
- moving: false,
-
- x: 0,
-
- touching: false,
- changeFromInside: false
- }
- },
- watch: {
-
-
- value(n) {
- if (!this.changeFromInside) {
- this.initX()
- } else {
- this.changeFromInside = false
- }
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getSliderRect()
- },
-
-
- getSliderRect() {
-
-
- 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,
-
- eventType: 'pan'
- })
- this.gesToken = 0
- }
- return
- }
- this.moving = true
- this.touching = true
-
- 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)`
-
- exporession = `(${exporession} / ${width}) * 100`
- if (step > 1) {
-
- exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
- } else {
-
- exporession = `max(${min}, min(${exporession}, ${max}))`
- }
-
- 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)
- // 标记下一次触发value的watch时,这个值的变化,是由内部改变的
- this.changeFromInside = true
- this.moving = false
- this.touching = false
- }
- })
- },
- // 从value的变化,倒推得出x的值该为多少
- initX() {
- const {
- left,
- width
- } = this.sliderRect
- // 得出x的初始偏移值,之所以需要这么做,是因为在bindingX中,触摸滑动时,只能的值本次移动的偏移值
- // 而无法的值准确的前后移动的两个点的坐标值,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
- })
- }
- }
- }
|