Rychou/mpvue-vant

在mpvue中同时使用2个slider组件出现问题

Deadpool957 opened this issue · 13 comments

Deadpool957 commented 
                </div>
                <div class="line">
                    <van-slider value="0" step="1" bar-height="10px" @change="onChanges" :bgl="bgl" max="100" min="1" :key="2"/>
       
                
                </div>
Rychou commented

@Deadpool957 这应该是你传参语法出了问题

max="100" // 这样传进去的是string
:max="100" // 这样传才是number

你尝试一下

Deadpool957 commented

我试试

Deadpool957 commented

我上面定义的是最大值60，下面定义的是100，然后上面max=60 不能拉到底，

Deadpool957 commented

还是不行

Rychou commented

@Deadpool957 我晚点帮你试试

Rychou commented

把完整的代码贴一下 @Deadpool957

Deadpool957 commented
时间
{{cores}}分
                </div>
                <div class="line">
                    <van-slider value="0" step="1" bar-height="10px" @change="onChanges" :bgl="bgl" :max="100" min="1" :key="2"/>
                    <div class="time_from">数量</div>
                    <div class="cores">{{nums}}道</div>
                
                </div>

//index.js
import { VantComponent } from '../common/component';
import { touch } from '../mixins/touch';
VantComponent({
mixins: [touch],
props: {
disabled: Boolean,
max: {
type: Number,
value: 100
},
min: {
type: Number,
value: 1
},
step: {
type: Number,
value: 1
},
value: {
type: Number,
value: 0
},
barHeight: {
type: String,
value: '2px'
},
bgl:{
type:String,
value:" "
}
},
watch: {
value: function value(_value) {
this.updateValue(_value, false);
console.log(this._value);
}
},
created: function created() {
this.updateValue(this.data.value);
console.log(this.data);
this.onClick();
},
methods: {
onTouchStart: function onTouchStart(event) {
if (this.data.disabled) return;
this.touchStart(event);
this.startValue = this.format(this.data.value);
},
onTouchMove: function onTouchMove(event) {
var _this = this;

  if (this.data.disabled) return;
  this.touchMove(event);
  this.getRect('.van-slider').then(function (rect) {
    var diff = _this.deltaX / rect.width * 100;

    _this.updateValue(_this.startValue + diff);
  });
},
onTouchEnd: function onTouchEnd() {
  if (this.data.disabled) return;
  this.updateValue(this.data.value, true);
},
onClick: function onClick(event) {
  var _this2 = this;

  if (this.data.disabled) return;
  this.getRect(function (rect) {
    var value = (event.detail.x - rect.left) / rect.width * 100;

    _this2.updateValue(value, true);
  });
},
updateValue: function updateValue(value, end) {
  value = this.format(value);
  this.setData({
    value: value,
    bg:"background:url("+this.data.bgl+")no-repeat center center",
    barStyle: "width: " + value + "%; height: " + this.data.barHeight + ";"
  
  });
  console.log(this.data.bgl,this.data.bg)

  if (end) {
    this.$emit('change', value);
  }
},
format: function format(value) {
  var _this$data = this.data,
      max = _this$data.max,
      min = _this$data.min,
      step = _this$data.step;
  return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
}

}
});

Rychou commented

@Deadpool957
你这代码的结构看的我头疼

Deadpool957 commented

粘的有点乱

Rychou commented

@Deadpool957
我测试的没问题的

深度录屏_选择区域_20181125182759.gif

<template>
  <div>
    <van-slider :value="value1" @change="onChange1" :max="100" :min="10"/>
    <div class="s2" >
      <van-slider :value="value2" @change="onChange2" :max="80" :min="0"/>
    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      value1: 60,
      value2: 30,
    }
  },
  methods: {
    onChange1(e){
      console.log(e.mp.detail)
      this.value1 = e.mp.detail
    },
    onChange2(e){
      console.log(e.mp.detail)
      this.value2 = e.mp.detail
    }
  }
}
</script>

<style>
.s2{
  margin-top: 20px;
}
</style>
Deadpool957 commented

我试试，谢了