微信登录版

wechat_v2/miniprogram_npm/@vant/weapp/slider/index.js

@@ -0,0 +1,115 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var component_1 = require('../common/component');
+var touch_1 = require('../mixins/touch');
+var version_1 = require('../common/version');
+var utils_1 = require('../common/utils');
+component_1.VantComponent({
+  mixins: [touch_1.touch],
+  props: {
+    disabled: Boolean,
+    useButtonSlot: Boolean,
+    activeColor: String,
+    inactiveColor: String,
+    max: {
+      type: Number,
+      value: 100,
+    },
+    min: {
+      type: Number,
+      value: 0,
+    },
+    step: {
+      type: Number,
+      value: 1,
+    },
+    value: {
+      type: Number,
+      value: 0,
+      observer: function (val) {
+        if (val !== this.value) {
+          this.updateValue(val);
+        }
+      },
+    },
+    barHeight: null,
+  },
+  created: function () {
+    this.updateValue(this.data.value);
+  },
+  methods: {
+    onTouchStart: function (event) {
+      if (this.data.disabled) return;
+      this.touchStart(event);
+      this.startValue = this.format(this.value);
+      this.dragStatus = 'start';
+    },
+    onTouchMove: function (event) {
+      var _this = this;
+      if (this.data.disabled) return;
+      if (this.dragStatus === 'start') {
+        this.$emit('drag-start');
+      }
+      this.touchMove(event);
+      this.dragStatus = 'draging';
+      utils_1.getRect(this, '.van-slider').then(function (rect) {
+        var diff = (_this.deltaX / rect.width) * _this.getRange();
+        _this.newValue = _this.startValue + diff;
+        _this.updateValue(_this.newValue, false, true);
+      });
+    },
+    onTouchEnd: function () {
+      if (this.data.disabled) return;
+      if (this.dragStatus === 'draging') {
+        this.updateValue(this.newValue, true);
+        this.$emit('drag-end');
+      }
+    },
+    onClick: function (event) {
+      var _this = this;
+      if (this.data.disabled) return;
+      var min = this.data.min;
+      utils_1.getRect(this, '.van-slider').then(function (rect) {
+        var value =
+          ((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
+        _this.updateValue(value, true);
+      });
+    },
+    updateValue: function (value, end, drag) {
+      value = this.format(value);
+      var min = this.data.min;
+      var width = ((value - min) * 100) / this.getRange() + '%';
+      this.value = value;
+      this.setData({
+        barStyle:
+          '\n          width: ' +
+          width +
+          ';\n          ' +
+          (drag ? 'transition: none;' : '') +
+          '\n        ',
+      });
+      if (drag) {
+        this.$emit('drag', { value: value });
+      }
+      if (end) {
+        this.$emit('change', value);
+      }
+      if ((drag || end) && version_1.canIUseModel()) {
+        this.setData({ value: value });
+      }
+    },
+    getRange: function () {
+      var _a = this.data,
+        max = _a.max,
+        min = _a.min;
+      return max - min;
+    },
+    format: function (value) {
+      var _a = this.data,
+        max = _a.max,
+        min = _a.min,
+        step = _a.step;
+      return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
+    },
+  },
+});

wechat_v2/miniprogram_npm/@vant/weapp/slider/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

wechat_v2/miniprogram_npm/@vant/weapp/slider/index.wxml

@@ -0,0 +1,30 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="../wxs/style.wxs" module="style" />
+
+<view
+  class="custom-class {{ utils.bem('slider', { disabled }) }}"
+  style="{{ style({ background: inactiveColor, height: utils.addUnit(barHeight) }) }}"
+  bind:tap="onClick"
+>
+  <view
+    class="{{ utils.bem('slider__bar') }}"
+    style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
+  >
+    <view
+      class="{{ utils.bem('slider__button-wrapper') }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+  </view>
+</view>

wechat_v2/miniprogram_npm/@vant/weapp/slider/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function barStyle(barHeight, activeColor) {
+  return style({
+    height: addUnit(barHeight),
+    background: activeColor,
+  });
+}
+
+module.exports = {
+  barStyle: barStyle,
+};

wechat_v2/miniprogram_npm/@vant/weapp/slider/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-slider{position:relative;height:2px;height:var(--slider-bar-height,2px);border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;transition:all .2s;transition:all var(--animation-duration-fast,.2s)}.van-slider__button{width:24px;width:var(--slider-button-width,24px);height:24px;height:var(--slider-button-height,24px);border-radius:50%;border-radius:var(--slider-button-border-radius,50%);box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0)}.van-slider--disabled{opacity:.5;opacity:var(--slider-disabled-opacity,.5)}