仿互站小程序

vant/slider/index.js

@@ -0,0 +1,73 @@
+var t = require("../common/component"), a = require("../mixins/touch");
+
+(0, t.VantComponent)({
+    mixins: [ a.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
+        },
+        barHeight: {
+            type: String,
+            value: "2px"
+        }
+    },
+    watch: {
+        value: function(t) {
+            this.updateValue(t, !1);
+        }
+    },
+    created: function() {
+        this.updateValue(this.data.value);
+    },
+    methods: {
+        onTouchStart: function(t) {
+            this.data.disabled || (this.touchStart(t), this.startValue = this.format(this.data.value));
+        },
+        onTouchMove: function(t) {
+            var a = this;
+            this.data.disabled || (this.touchMove(t), this.getRect(".van-slider").then(function(t) {
+                var e = a.deltaX / t.width * 100;
+                a.newValue = a.startValue + e, a.updateValue(a.newValue, !1, !0);
+            }));
+        },
+        onTouchEnd: function() {
+            this.data.disabled || this.updateValue(this.newValue, !0);
+        },
+        onClick: function(t) {
+            var a = this;
+            this.data.disabled || this.getRect(".van-slider").then(function(e) {
+                var i = (t.detail.x - e.left) / e.width * 100;
+                a.updateValue(i, !0);
+            });
+        },
+        updateValue: function(t, a, e) {
+            t = this.format(t), this.set({
+                value: t,
+                barStyle: "width: " + t + "%; height: " + this.data.barHeight + ";"
+            }), e && this.$emit("drag", {
+                value: t
+            }), a && this.$emit("change", t);
+        },
+        format: function(t) {
+            var a = this.data, e = a.max, i = a.min, u = a.step;
+            return Math.round(Math.max(i, Math.min(t, e)) / u) * u;
+        }
+    }
+});

vant/slider/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-icon": "/vant/icon/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/slider/index.wxml

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

vant/slider/index.wxss

@@ -0,0 +1,41 @@
+@import "../area/index.wxss";
+
+.van-slider {
+    position: relative;
+    border-radius: 999px;
+    background-color: #e5e5e5;
+}
+
+.van-slider__bar {
+    position: relative;
+    border-radius: inherit;
+    background-color: #1989fa;
+}
+
+.van-slider__button {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 1px 2px rgba(0,0,0,.5);
+}
+
+.van-slider__button-wrapper {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate3d(50%,-50%,0);
+}
+
+.van-slider__button-wrapper:after {
+    content: "";
+    position: absolute;
+    width: 200%;
+    height: 200%;
+    top: -50%;
+    left: -50%;
+}
+
+.van-slider--disabled {
+    opacity: .3;
+}