docs(scroll): update (didi#238)

wang00100 · Jun 29, 2018 · 4402102 · 4402102
1 parent efbea2e
commit 4402102
Show file tree

Hide file tree

Showing 9 changed files with 549 additions and 295 deletions.
diff --git a/document/components/docs/en-US/scroll.md b/document/components/docs/en-US/scroll.md
diff --git a/document/components/docs/zh-CN/scroll.md b/document/components/docs/zh-CN/scroll.md
diff --git a/example/pages/scroll/config.vue b/example/pages/scroll/config.vue
@@ -36,7 +36,7 @@
           <cube-scroll
             ref="scroll"
             :data="items"
-            :options="scrollOptions"
+            :options="options"
             @pulling-down="onPullingDown"
             @pulling-up="onPullingUp">
             <ul class="foods-wrapper">
@@ -119,7 +119,7 @@ export default {
     SelectOption
   },
   computed: {
-    scrollOptions() {
+    options() {
       return {
         pullDownRefresh: this.pullDownRefreshObj,
         pullUpLoad: this.pullUpLoadObj,

diff --git a/example/pages/scroll/default.vue b/example/pages/scroll/default.vue
@@ -22,7 +22,7 @@
           <cube-scroll
             ref="scroll"
             :data="items"
-            :options="scrollOptions">
+            :options="options">
           </cube-scroll>
         </div>
       </div>
@@ -99,11 +99,16 @@ export default {
       customPullDown: false
     }
   },
-  components: {
-    CubePage,
-    SwitchOption,
-    InputOption,
-    SelectOption
+  computed: {
+    options() {
+      return {
+        scrollbar: this.scrollbarObj,
+        startY: this.startY
+      }
+    },
+    scrollbarObj: function() {
+      return this.scrollbar ? { fade: this.scrollbarFade } : false
+    }
   },
   watch: {
     scrollbarObj: {
@@ -116,17 +121,6 @@ export default {
       this.rebuildScroll()
     }
   },
-  computed: {
-    scrollOptions() {
-      return {
-        scrollbar: this.scrollbarObj,
-        startY: this.startY
-      }
-    },
-    scrollbarObj: function() {
-      return this.scrollbar ? { fade: this.scrollbarFade } : false
-    }
-  },
   methods: {
     scrollTo() {
       this.$refs.scroll.scrollTo(
@@ -160,6 +154,12 @@ export default {
         this.$refs.scroll.initScroll()
       })
     }
+  },
+  components: {
+    CubePage,
+    SwitchOption,
+    InputOption,
+    SelectOption
   }
 }
 </script>

diff --git a/example/pages/scroll/herizontal.vue → example/pages/scroll/horizontal.vue b/example/pages/scroll/herizontal.vue → example/pages/scroll/horizontal.vue
@@ -2,8 +2,8 @@
   <cube-page type="scroll-view" title="Scroll" class="option-demo">
     <div slot="content" class="scroll-wrapper">
       <div class="demo">
-        <div class="title">Herizontal Demo</div>
-        <div class="herizontal-scroll-list-wrap">
+        <div class="title">horizontal Demo</div>
+        <div class="horizontal-scroll-list-wrap">
           <cube-scroll
             ref="scroll"
             :data="items"
@@ -56,15 +56,14 @@ export default {
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-.herizontal-scroll-list-wrap
+.horizontal-scroll-list-wrap
   border: 1px solid rgba(0, 0, 0, 0.1)
   border-radius: 5px
   transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
   position: relative
   .cube-scroll-content
     display: inline-block
     .list-wrapper
-      display: inline-block
       padding: 0 10px
       line-height: 60px
       white-space: nowrap

diff --git a/example/pages/scroll/index.vue b/example/pages/scroll/index.vue
@@ -2,11 +2,11 @@
   <cube-page type="scroll" title="Scroll">
     <div slot="content">
       <cube-button-group>
-        <cube-button @click="goTo('default')">Default</cube-button>
-        <cube-button @click="goTo('config')">Config</cube-button>
-        <cube-button @click="goTo('herizontal')">Herizontal</cube-button>
-        <cube-button @click="goTo('jd')">京东</cube-button>
-        <cube-button @click="goTo('toutiao')">头条</cube-button>
+        <cube-button @click="goTo('default')"><span class="scroll-example">1. Default</span></cube-button>
+        <cube-button @click="goTo('horizontal')"><span class="scroll-example">2. Horizontal</span></cube-button>
+        <cube-button @click="goTo('config')"><span class="scroll-example">3. Customized</span></cube-button>
+        <cube-button @click="goTo('jd')"><span class="scroll-example">4. JD</span></cube-button>
+        <cube-button @click="goTo('toutiao')"><span class="scroll-example">5. Toutiao</span></cube-button>
       </cube-button-group>
       <cube-view></cube-view>
     </div>
@@ -33,4 +33,9 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+  .scroll-example
+    display: inline-block
+    width: 100px
+    margin: auto
+    text-align: left
 </style>
diff --git a/example/pages/scroll/jd.vue b/example/pages/scroll/jd.vue
@@ -6,7 +6,7 @@
         ref="scroll"
         :data="[]"
         :scroll-events="['scroll']"
-        :options="scrollOptions"
+        :options="options"
         @scroll="onScrollHandle"
         @pulling-down="onPullingDown">
         <img src="http://om0jxp12h.bkt.clouddn.com/jd_content.JPG">
@@ -44,7 +44,7 @@ import CubePage from '../../components/cube-page.vue'
 export default {
   data() {
     return {
-      scrollOptions: {
+      options: {
         pullDownRefresh: {
           threshold: 60,
           stop: 40,
@@ -72,7 +72,7 @@ export default {
       }
     },
     headerStyle() {
-      return `${Math.min(1, Math.max(0, 1 - this.pullDownY / 40))}`
+      return Math.min(1, Math.max(0, 1 - this.pullDownY / 40))
     }
   },
   methods: {

diff --git a/example/pages/scroll/toutiao.vue b/example/pages/scroll/toutiao.vue
@@ -17,7 +17,7 @@
           <cube-scroll
             ref="contentScroll"
             :data="content"
-            :options="contentScrollOptions"
+            :options="options"
             @pulling-down="onPullingDown"
             @pulling-up="onPullingUp">
             <ul class="imgs-wrapper">
@@ -26,15 +26,13 @@
               </li>
             </ul>
             <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 > contentScrollOptions.pullDownRefresh.threshold - 60}">↓</span>
+              <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 > 0}">↓</span>
                 </div>
                 <div class="after-trigger" v-else>
                   <div v-show="props.isPullingDown" class="loading">
@@ -76,7 +74,7 @@ export default {
   data() {
     return {
       content: imgs.slice(),
-      contentScrollOptions: {
+      options: {
         pullDownRefresh: {
           threshold: 60,
           // stop: 44,
@@ -179,10 +177,12 @@ export default {
   .cube-pulldown-wrapper
     text-align: center
     .before-trigger
+      height: auto
       font-size: 30px
       align-self: flex-end
       span
         display: inline-block
+        line-height: 1
         transition: all 0.3s
         color: #666
         padding: 15px 0

diff --git a/example/router/routes.js b/example/router/routes.js
@@ -27,7 +27,7 @@ import Scroll from '../pages/scroll/index.vue'
 import ScrollDefault from '../pages/scroll/default.vue'
 import ScrollConfig from '../pages/scroll/config.vue'
 import ScrollJd from '../pages/scroll/jd.vue'
-import ScrollHerizontal from '../pages/scroll/herizontal.vue'
+import ScrollHorizontal from '../pages/scroll/horizontal.vue'
 import ScrollToutiao from '../pages/scroll/toutiao.vue'
 import IndexList from '../pages/index-list/index.vue'
 import IndexListDefault from '../pages/index-list/default.vue'
@@ -199,8 +199,8 @@ const routes = [
         component: ScrollJd
       },
       {
-        path: 'herizontal',
-        component: ScrollHerizontal
+        path: 'horizontal',
+        component: ScrollHorizontal
       },
       {
         path: 'toutiao',