From 1b8f8f6b516f37c642b4928f5297dd8932c0dd26 Mon Sep 17 00:00:00 2001
From: funanamy <funanamy@didichuxing.com>
Date: Wed, 8 Nov 2017 14:26:31 +0800
Subject: [PATCH 1/2] enhance scroll demo: add options

---
 .../components/input-option/input-option.vue  |  56 +++
 .../select-option/select-option.vue           |  63 +++
 .../switch-option/switch-option.vue           |  83 ++++
 example/data/ease.js                          |  23 ++
 example/pages/scroll.vue                      | 391 ++++++++++++++----
 src/components/scroll/scroll.vue              |   7 +-
 6 files changed, 551 insertions(+), 72 deletions(-)
 create mode 100644 example/components/input-option/input-option.vue
 create mode 100644 example/components/select-option/select-option.vue
 create mode 100644 example/components/switch-option/switch-option.vue
 create mode 100755 example/data/ease.js

diff --git a/example/components/input-option/input-option.vue b/example/components/input-option/input-option.vue
new file mode 100644
index 000000000..e6eaf3f36
--- /dev/null
+++ b/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 1 auto
+      width: 10rem
+      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>
diff --git a/example/components/select-option/select-option.vue b/example/components/select-option/select-option.vue
new file mode 100644
index 000000000..de3b2cac4
--- /dev/null
+++ b/example/components/select-option/select-option.vue
@@ -0,0 +1,63 @@
+<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 1 auto
+      width: 10rem
+      display inline-flex
+      align-items center
+    select
+      flex: 1 1 auto
+      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>
diff --git a/example/components/switch-option/switch-option.vue b/example/components/switch-option/switch-option.vue
new file mode 100644
index 000000000..6a9e562a0
--- /dev/null
+++ b/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>
diff --git a/example/data/ease.js b/example/data/ease.js
new file mode 100755
index 000000000..006689387
--- /dev/null
+++ b/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)
+    }
+  }
+}
diff --git a/example/pages/scroll.vue b/example/pages/scroll.vue
index b34e7e363..d42d59ff3 100644
--- a/example/pages/scroll.vue
+++ b/example/pages/scroll.vue
@@ -1,40 +1,107 @@
 <template>
   <cube-page type="scroll-view" title="Scroll">
     <div slot="content" class="scroll-wrapper">
-      <cube-scroll
-        ref="scroll"
-        :data="items"
-        :scrollbar="scrollbar"
-        :pull-down-refresh="pullDownRefresh"
-        :pull-up-load="pullUpLoad"
-        @pulling-down="onPullingDown"
-        @pulling-up="onPullingUp">
-        <template slot="pulldown" slot-scope="props">
-          <div
-              v-if="props.pullDownRefresh"
-              class="cube-pulldown-wrapper"
-              :style="props.pullDownStyle">
-            <div
-                v-if="props.beforePullDown"
-                class="before-trigger"
-                :style="{paddingTop: props.bubbleY + 'px'}">
-              <span :class="{rotate: props.bubbleY > 40}">↓</span>
-            </div>
-            <div class="after-trigger" v-else>
-              <div v-if="props.isPullingDown" class="loading">
-                <cube-loading></cube-loading>
+      <div class="options">
+        <div class="title sub">Options</div>
+        <div class="option-list">
+          <div class="group">
+            <switch-option class="item" name="Scrollbar" :value="scrollbar"
+                           @update:value="updateScrollbar"></switch-option>
+            <switch-option v-if="scrollbar" class="item sub first last" name="fade" :value="scrollbarFade"
+                           @update:value="updateScrollbarFade"></switch-option>
+          </div>
+          <div class="group">
+            <switch-option class="item" name="Pull Down Refresh" :value="pullDownRefresh"
+                           @update:value="updatePullDownRefresh"></switch-option>
+            <input-option v-if="pullDownRefresh" class="item sub first" name="threshold (≥ 40)"
+                          :value="pullDownRefreshThreshold" min-value="40"
+                          @update:value="updatePullDownRefreshThreshold"></input-option>
+            <input-option v-if="pullDownRefresh" class="item sub" name="stop (≥ 40)" :value="pullDownRefreshStop"
+                          min-value="40"
+                          @update:value="updatePullDownRefreshStop"></input-option>
+            <input-option v-if="pullDownRefresh" class="item sub" name="txt" :value="pullDownRefreshTxt"
+                          @update:value="updatePullDownRefreshTxt"></input-option>
+            <switch-option v-if="pullDownRefresh" class="item sub last" name="Custom Animation" :value="customPullDown"
+                           @update:value="updateCustomPullDown"></switch-option>
+          </div>
+          <div class="group">
+            <switch-option class="item" name="Pull Up Load" :value="pullUpLoad"
+                           @update:value="updatePullUpLoad"></switch-option>
+            <input-option v-if="pullUpLoad" class="item sub first" name="threshold" :value="pullUpLoadThreshold"
+                          @update:value="updatePullUpLoadThreshold"></input-option>
+            <input-option v-if="pullUpLoad" class="item sub" name="moreTxt" :value="pullUpLoadMoreTxt"
+                          @update:value="updatePullUpLoadMoreTxt"></input-option>
+            <input-option v-if="pullUpLoad" class="item sub last" name="noMoreTxt" :value="pullUpLoadNoMoreTxt"
+                          @update:value="updatePullUpLoadNoMoreTxt"></input-option>
+          </div>
+          <div class="group">
+            <input-option class="item" name="startY" :value="startY"
+                          @update:value="updateStartY"></input-option>
+          </div>
+        </div>
+      </div>
+      <div class="demo">
+        <div class="title sub">Demo</div>
+        <div class="scroll-list-wrap">
+          <cube-scroll
+              ref="scroll"
+              :data="items"
+              :scrollbar="scrollbarObj"
+              :pull-down-refresh="pullDownRefreshObj"
+              :pull-up-load="pullUpLoadObj"
+              @pulling-down="onPullingDown"
+              @pulling-up="onPullingUp">
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                  v-if="props.pullDownRefresh"
+                  class="cube-pulldown-wrapper"
+                  :style="props.pullDownStyle">
+                <div
+                    v-if="props.beforePullDown"
+                    class="before-trigger"
+                    :style="{paddingTop: props.bubbleY + 'px'}">
+                  <span :class="{rotate: props.bubbleY > 40}">↓</span>
+                </div>
+                <div class="after-trigger" v-else>
+                  <div v-if="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-else><span>Refresh success</span></div>
+                </div>
               </div>
-              <div v-else><span>Refresh success</span></div>
-            </div>
+            </template>
+          </cube-scroll>
+        </div>
+      </div>
+      <div class="methods">
+        <div class="title sub">Methods</div>
+        <ul class="method-list">
+          <div class="group">
+            <input-option class="item" name="x" :value="scrollToX"
+                          @update:value="updateScrollToX"></input-option>
+            <input-option class="item" name="y" :value="scrollToY"
+                          @update:value="updateScrollToY"></input-option>
+            <input-option class="item" name="time" :value="scrollToTime"
+                          @update:value="updateScrollToTime"></input-option>
+            <select-option class="item" name="easing" :value="scrollToEasing" :options="scrollToEasingOptions"
+                           @update:value="updateScrollToEasing"></select-option>
+            <button @click="scrollTo">scrollTo</button>
           </div>
-        </template>
-      </cube-scroll>
+        </ul>
+      </div>
+
     </div>
   </cube-page>
 </template>
 
 <script type="text/ecmascript-6">
+  import Vue from 'vue'
   import CubePage from '../components/cube-page.vue'
+  import SwitchOption from '../components/switch-option/switch-option.vue'
+  import InputOption from '../components/input-option/input-option.vue'
+  import SelectOption from '../components/select-option/select-option.vue'
+
+  import { ease } from '../data/ease'
 
   const _data = [
     'I am line 1',
@@ -59,25 +126,71 @@
       return {
         items: _data,
         itemIndex: _data.length,
-        scrollbar: {
-          fade: true
+        scrollbar: true,
+        scrollbarFade: true,
+        pullDownRefresh: true,
+        pullDownRefreshThreshold: 90,
+        pullDownRefreshStop: 40,
+        pullDownRefreshTxt: 'Refresh success',
+        pullUpLoad: true,
+        pullUpLoadThreshold: 0,
+        pullUpLoadMoreTxt: 'Load more',
+        pullUpLoadNoMoreTxt: 'No more data',
+        startY: 0,
+        scrollToX: 0,
+        scrollToY: -200,
+        scrollToTime: 700,
+        scrollToEasing: 'bounce',
+        scrollToEasingOptions: ['bounce', 'swipe', 'swipeBounce'],
+        customPullDown: false
+      }
+    },
+    components: {
+      CubePage,
+      SwitchOption,
+      InputOption,
+      SelectOption
+    },
+    watch: {
+      scrollbarObj: {
+        handler() {
+          this.rebuildScroll()
         },
-        pullDownRefresh: {
-          threshold: 90,
-          stop: 40,
-          txt: 'Refresh success'
+        deep: true
+      },
+      pullDownRefreshObj: {
+        handler() {
+          this.rebuildScroll()
         },
-        pullUpLoad: {
-          threshold: 0,
-          txt: {
-            more: 'Load more',
-            noMore: 'No more data'
-          }
-        }
+        deep: true
+      },
+      pullUpLoadObj: {
+        handler() {
+          this.rebuildScroll()
+        },
+        deep: true
+      },
+      startY() {
+        this.rebuildScroll()
       }
     },
-    components: {
-      CubePage
+    computed: {
+      scrollbarObj: function () {
+        return this.scrollbar ? {fade: this.scrollbarFade} : false
+      },
+      pullDownRefreshObj: function () {
+        return this.pullDownRefresh ? {
+          threshold: parseInt(this.pullDownRefreshThreshold),
+          stop: parseInt(this.pullDownRefreshStop),
+          txt: this.pullDownRefreshTxt
+        } : false
+      },
+      pullUpLoadObj: function () {
+        return this.pullUpLoad ? {
+          threshold: parseInt(this.pullUpLoadThreshold),
+          txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
+        } : false
+      }
     },
     methods: {
       onPullingDown() {
@@ -111,41 +224,179 @@
             this.$refs.scroll.forceUpdate()
           }
         }, 1000)
+      },
+      scrollTo() {
+        this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime, ease[this.scrollToEasing])
+      },
+      updateScrollbar(val) {
+        this.scrollbar = val
+      },
+      updateScrollbarFade(val) {
+        this.scrollbarFade = val
+      },
+      updatePullDownRefresh(val) {
+        this.pullDownRefresh = val
+      },
+      updatePullDownRefreshThreshold(val) {
+        this.pullDownRefreshThreshold = val
+      },
+      updatePullDownRefreshStop(val) {
+        this.pullDownRefreshStop = val
+      },
+      updatePullDownRefreshTxt(val) {
+        this.pullDownRefreshTxt = val
+      },
+      updatePullUpLoad(val) {
+        this.pullUpLoad = val
+      },
+      updatePullUpLoadThreshold(val) {
+        this.pullUpLoadThreshold = val
+      },
+      updatePullUpLoadMoreTxt(val) {
+        this.pullUpLoadMoreTxt = val
+      },
+      updatePullUpLoadNoMoreTxt(val) {
+        this.pullUpLoadNoMoreTxt = val
+      },
+      updateStartY(val) {
+        this.startY = val
+      },
+      updateCustomPullDown(val) {
+        this.customPullDown = val
+      },
+      updateScrollToX(val) {
+        this.scrollToX = val
+      },
+      updateScrollToY(val) {
+        this.scrollToY = val
+      },
+      updateScrollToTime(val) {
+        this.scrollToTime = val
+      },
+      updateScrollToEasing(val) {
+        this.scrollToEasing = val
+      },
+      rebuildScroll() {
+        Vue.nextTick(() => {
+          this.$refs.scroll.destroy()
+          this.$refs.scroll.initScroll()
+        })
       }
     }
   }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+  @import "../../src/common/stylus/variable.styl"
+
+  .cube-page
+    .wrapper
+      background: $color-white
   .scroll-wrapper
-    position: relative
-    height: 510px
-    .cube-scroll-wrapper
-      position: absolute
-      left: 0
-      top: 0
-      right: 0
-      bottom: 0
-      overflow: hidden
+    display: flex
+    justify-content: space-between
+    flex-wrap: wrap
+    .title
+      font-size: 1.5rem
+      font-weight: 500
+      color: $color-dark-grey
+      padding: 1rem
+      border-bottom: 1px solid rgba(0, 0, 0, .1)
+      margin-bottom: 1rem
+    .options
+      @media screen and (min-width: 42rem)
+        flex: 0 1 25%
+      @media screen and (max-width: 42rem)
+        flex: 0 1 100%
+        margin-bottom: 1rem
+
+      .option-list
+        .group
+          margin-bottom: 1rem
+          border: 1px solid rgba(0, 0, 0, .1)
+          border-radius: $radius-size-medium
+        .item
+          height: 3.2rem
+          border-bottom: 1px solid rgba(0, 0, 0, .1)
+          &.sub
+            font-size: $fontsize-medium
+            background-color: $color-active-light-gray
+            &.first
+              box-shadow: 0 1px 1px 1px #eee inset
+            &.last
+              border-bottom: none
+
+    .demo
+      @media screen and (min-width: 42rem)
+        flex: 0 0 23rem
+      @media screen and (max-width: 42rem)
+        flex: 0 0 100%
+        margin-bottom: 1rem
+
+      .scroll-list-wrap
+        position relative
+        @media screen and (min-width: 42rem)
+          height: 30rem
+        @media screen and (max-width: 42rem)
+          height: 26rem
+        border: 1px solid rgba(0, 0, 0, .1)
+        border-radius: $radius-size-medium
+        transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
+        overflow: hidden
+    .methods
+      @media screen and (min-width: 42rem)
+        flex: 0 1 25%
+      @media screen and (max-width: 42rem)
+        flex: 0 1 100%
+      .method-list
+        .group
+          margin-bottom: 1rem
+          border: 1px solid rgba(0, 0, 0, .1)
+          border-radius: $radius-size-medium
+        .item
+        button
+          height: 2.5rem
+          font-size: $fontsize-large
+        .item
+          background-color: $color-active-light-gray
+          border-bottom: 1px solid rgba(0, 0, 0, .1)
+        button
+          width: 100%
+          height: 2.5rem
+          border-bottom-left-radius: $radius-size-medium
+          border-bottom-right-radius: $radius-size-medium
+          background-color: $color-orange
+          box-shadow: 0 0 0 1px $color-orange
+          border: none
+          outline: none
+          color: $color-white
+
+  .cube-scroll-wrapper
+    position: absolute
+    left: 0
+    top: 0
+    right: 0
+    bottom: 0
+    overflow: hidden
+    background: #fff
+    .cube-scroll-content
+      position: relative
+      z-index: 10
       background: #fff
-      .cube-scroll-content
-        position: relative
-        z-index: 10
-        background: #fff
-        .scroll-item
-          height: 60px
-          line-height: 60px
-          font-size: 18px
-          padding-left: 20px
-          border-bottom: 1px solid #e5e5e5
-      .cube-pulldown-wrapper
-        .before-trigger
-          font-size: 30px
-          align-self: flex-end
-          span
-            display: inline-block
-            transition: all 0.3s
-            color: #666
-            &.rotate
-              transform: rotate(180deg)
+      .scroll-item
+        height: 60px
+        line-height: 60px
+        font-size: 18px
+        padding-left: 20px
+        border-bottom: 1px solid #e5e5e5
+    .cube-pulldown-wrapper
+      .before-trigger
+        font-size: 30px
+        align-self: flex-end
+        span
+          display: inline-block
+          transition: all 0.3s
+          color: #666
+          &.rotate
+            transform: rotate(180deg)
 </style>
diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue
index 02e44bc51..0b3a8838e 100644
--- a/src/components/scroll/scroll.vue
+++ b/src/components/scroll/scroll.vue
@@ -128,11 +128,11 @@
     },
     mounted() {
       setTimeout(() => {
-        this._initScroll()
+        this.initScroll()
       }, 20)
     },
     methods: {
-      _initScroll() {
+      initScroll() {
         if (!this.$refs.wrapper) {
           return
         }
@@ -181,6 +181,9 @@
       refresh() {
         this.scroll && this.scroll.refresh()
       },
+      destroy() {
+        this.scroll.destroy()
+      },
       scrollTo() {
         this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
       },

From 032e81540c9202bac167df94753e1dda848ebc25 Mon Sep 17 00:00:00 2001
From: funanamy <funanamy@didichuxing.com>
Date: Wed, 8 Nov 2017 14:52:25 +0800
Subject: [PATCH 2/2] fix scroll demo UI bug

---
 example/components/input-option/input-option.vue   | 4 ++--
 example/components/select-option/select-option.vue | 5 +++--
 example/pages/scroll.vue                           | 7 -------
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/example/components/input-option/input-option.vue b/example/components/input-option/input-option.vue
index e6eaf3f36..a9374d34f 100644
--- a/example/components/input-option/input-option.vue
+++ b/example/components/input-option/input-option.vue
@@ -39,8 +39,8 @@
     align-items stretch
     padding-left: 15px
     .name
-      flex: 0 1 auto
-      width: 10rem
+      flex: 0 0 auto
+      width: 8rem
       display inline-flex
       align-items center
     input
diff --git a/example/components/select-option/select-option.vue b/example/components/select-option/select-option.vue
index de3b2cac4..fb700dd7d 100644
--- a/example/components/select-option/select-option.vue
+++ b/example/components/select-option/select-option.vue
@@ -45,12 +45,13 @@
     align-items stretch
     padding-left: 15px
     .name
-      flex: 0 1 auto
-      width: 10rem
+      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)
diff --git a/example/pages/scroll.vue b/example/pages/scroll.vue
index d42d59ff3..dae8690b3 100644
--- a/example/pages/scroll.vue
+++ b/example/pages/scroll.vue
@@ -293,9 +293,6 @@
     .wrapper
       background: $color-white
   .scroll-wrapper
-    display: flex
-    justify-content: space-between
-    flex-wrap: wrap
     .title
       font-size: 1.5rem
       font-weight: 500
@@ -304,10 +301,6 @@
       border-bottom: 1px solid rgba(0, 0, 0, .1)
       margin-bottom: 1rem
     .options
-      @media screen and (min-width: 42rem)
-        flex: 0 1 25%
-      @media screen and (max-width: 42rem)
-        flex: 0 1 100%
         margin-bottom: 1rem
 
       .option-list