Scroll demo enhance

example/components/input-option/input-option.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="input-option">
+    <span class="name">{{ name }}</span>
+    <input type="text" v-model="inputValue">
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'input-option'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      name: {
+        type: String
+      },
+      value: null,
+      minValue: null
+    },
+    data() {
+      return {
+        inputValue: this.value
+      }
+    },
+    watch: {
+      inputValue: function (newValue) {
+        this.$emit('update:value', this.minValue ? Math.max(newValue, this.minValue) : newValue)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+  @import "../../../src/common/stylus/variable.styl"
+
+  .input-option
+    display: flex
+    height: 100%
+    justify-content space-between
+    align-items stretch
+    padding-left: 15px
+    .name
+      flex: 0 0 auto
+      width: 8rem
+      display inline-flex
+      align-items center
+    input
+      flex: 1 1 auto
+      padding-left: 0.8rem
+      background-color: $color-white
+      border-left: 1px solid rgba(0, 0, 0, .1)
+      box-shadow: 0 0 1px 1px #eee inset
+      outline: none
+      &:focus
+        border: 1px solid $color-orange
+
+</style>

example/components/select-option/select-option.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="select-option">
+    <span class="name">{{ name }}</span>
+    <select v-model="selected">
+      <option v-for="option in options"  :value="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'select-option'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      name: {
+        type: String
+      },
+      options: {
+        type: Array
+      },
+      value: null
+    },
+    data() {
+      return {
+        selected: this.value
+      }
+    },
+    watch: {
+      selected: function (newValue) {
+        this.$emit('update:value', newValue)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+  @import "../../../src/common/stylus/variable.styl"
+
+  .select-option
+    display: flex
+    height: 100%
+    justify-content space-between
+    align-items stretch
+    padding-left: 15px
+    .name
+      flex: 0 0 auto
+      width: 8rem
+      display inline-flex
+      align-items center
+    select
+      flex: 1 1 auto
+      padding-left: 0.8rem
+      background-color: $color-white
+      border: none
+      border-left: 1px solid rgba(0, 0, 0, .1)
+      box-shadow: 0 0 1px 1px #eee inset
+      outline: none
+      border-radius: 0
+      &:focus
+        border: 1px solid $color-orange
+
+</style>

example/components/switch-option/switch-option.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="switch-option">
+    <span class="name">{{ name }}</span>
+    <div class="switch-ellipse" :class="{ active: checked }" @click="clickSwitch">
+      <span class="switch-circle" :class="{ active: checked }"></span>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+  const COMPONENT_NAME = 'switch-option'
+  export default {
+    name: COMPONENT_NAME,
+    props: {
+      name: {
+        type: String
+      },
+      value: null
+    },
+    data() {
+      return {
+        checked: this.value
+      }
+    },
+    watch: {
+      checked: function (newValue) {
+        this.$emit('update:value', newValue)
+      }
+    },
+    methods: {
+      clickSwitch: function () {
+        this.checked = !this.checked
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+  @import "../../../src/common/stylus/variable.styl"
+
+  .switch-option
+    display flex
+    justify-content space-between
+    align-items stretch
+    height: 100%
+    padding 0 15px
+    .name
+      display flex
+      align-items: center
+      flex: 0 1 auto
+    .switch-ellipse
+      align-self: center
+      flex: 0 0 auto
+      margin-top: 5px
+      display: inline-block
+      position: relative
+      height: 31px
+      width: 51px
+      background-color: $color-white
+      border-radius: 1000px
+      border: 2px solid rgba(0, 0, 0, .1)
+      transition: all 0.1s
+      &.active
+        background-color: $color-orange
+        border-color: transparent
+        transition: all 0.2s ease 0.2s
+      .switch-circle
+        position: absolute
+        display: inline-block
+        height: 27px
+        width: 27px
+        background: white
+        border-radius: 50%
+        border: 1px solid rgba(0, 0, 0, .1)
+        box-shadow: -1px 1px 1px #999
+        top: 0
+        left: 0
+        transition: all 0.3s
+        &.active
+          left: 21px
+          transition: all 0.4s ease 0.1s
+
+</style>

example/data/ease.js

@@ -0,0 +1,23 @@
+export const ease = {
+	// easeOutQuint
+  swipe: {
+    style: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    fn: function (t) {
+      return 1 + (--t * t * t * t * t)
+    }
+  },
+	// easeOutQuard
+  swipeBounce: {
+    style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    fn: function (t) {
+      return t * (2 - t)
+    }
+  },
+	// easeOutQuart
+  bounce: {
+    style: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+    fn: function (t) {
+      return 1 - (--t * t * t * t)
+    }
+  }
+}