scoller

@@ -5,6 +5,8 @@
 		"transform-vue-jsx",
 		"transform-object-rest-spread",
 		"syntax-dynamic-import",
-		"transform-class-properties"
+		"transform-class-properties",
+		"syntax-async-functions",
+		"transform-async-to-generator"
 	]
 }

@@ -25,6 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.16.2",
+    "babel-plugin-transform-async-to-generator": "^6.24.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-polyfill": "^6.23.0",
     "bluebird": "^3.4.2",
@@ -61,6 +62,7 @@
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.0.0",
+    "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

 import HeaderBox from './header-box';
 import LayoutBody from './layout-body';
 import LazyHtml from './lazy-html';
+import Scroller from './scroller';
 
 export default {
     HeaderBox,
     LayoutBody,
-    LazyHtml
+    LazyHtml,
+    Scroller
 };

+<template>
+    <div class="scroller-box">
+        <div
+            class="scroller-content"
+            ref="scroller"
+            :style="scrollerStyle"
+            @touchstart="touchstart"
+            @touchmove="touchmove"
+            @touchend="touchend">
+            <div class="scroller-top" :style="styleTop"></div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Scroller',
+    data() {
+        return {
+            distance: 0,
+            transition: false,
+            direction: '',
+            isLoading: false,
+            styleTop: {}
+        };
+    },
+    computed: {
+        scrollerStyle() {
+            const style = {};
+
+            if (this.distance) {
+                style.transform = `translate(0px, ${this.distance}px)`;
+            }
+            if (this.transition) {
+                style.transition = 'transform .2s ease';
+            }
+            return style;
+        }
+    },
+    methods: {
+        loading() {
+            this.isLoading = true;
+        },
+        stop() {
+            setTimeout(() => {
+                this.isLoading = false;
+                this.styleTop = {
+                    transition: 'margin .2s ease'
+                };
+            }, 500);
+        },
+        touchstart(e) {
+            this.startY = e.touches[0].clientY;
+            if (this.$el.scrollTop === 0) {
+                this.transition = false;
+                this.topStatus = '';
+            }
+        },
+        touchmove(e) {
+            this.currentY = e.touches[0].clientY;
+            let distance = (this.currentY - this.startY) / 2;
+
+            this.direction = distance > 0 ? 'down' : 'up';
+
+            if (this.direction === 'down' && this.$el.scrollTop === 0) {
+                this.distance = distance;
+                if (this.distance > 50) {
+                    this.topStatus = 'drag';
+                }
+            }
+        },
+        touchend() {
+            if (this.direction === 'down' && this.$el.scrollTop === 0) {
+                this.transition = true;
+                if (this.topStatus) {
+                    this.styleTop = {
+                        marginTop: '0'
+                    };
+                }
+                if (this.distance > 50 && !this.isLoading) {
+                    this.isLoading = true;
+                    this.$emit('loading');
+                }
+                this.distance = 0;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.scroller-box {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+}
+.scroller-top {
+    width: 87px;
+    height: 66px;
+    margin: 0 auto;
+    margin-top: -66px;
+    background-image: url(~statics/img/pull_sprite.png);
+    background-position: -2320px 0;
+    background-repeat: no-repeat;
+    background-size: 2494px 66px;
+    animation: loadingScroller 1s steps(29) .5s infinite;
+}
+@keyframes loadingScroller {
+    0% { background-position: 0 0; }
+    100% { background-position: -2494px 0; }
+}
+</style>

 <template>
     <resource>
         <ul class="resource-products">
-            <li class="product-item" v-for="(item, index) in value" :key="index">
+            <li class="product-item" v-for="(item, index) in value.list" :key="index">
                 <img-format :src="item.default_images" :w="94" :h="125"></img-format>
-                <p class="brand ellipsis" v-if="item.brand_name">{{item.brand_name}}</p>
-                <p class="title ellipsis" v-if="item.product_name">{{item.product_name}}</p>
-                <p class="price ellipsis" v-if="item.sales_price">￥{{item.sales_price}}</p>
+                <div class="ellipsis">
+                    <p class="brand" v-if="item.brand_name">{{item.brand_name}}</p>
+                    <p class="title" v-if="item.product_name">{{item.product_name}}</p>
+                    <p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
+                </div>
             </li>
         </ul>
     </resource>
@@ -17,7 +19,7 @@ import Resource from './resource';
 export default {
     name: 'ResourceProductList',
     props: {
-        value: Array
+        value: Object
     },
     computed: {
     },
@@ -43,7 +45,7 @@ export default {
             height: 250px;
         }
 
-        .ellipsis {
+        .ellipsis>p {
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;

@@ -14,13 +14,15 @@
                     <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
                 </span>
             </header-box>
-            <div class="resources">
-                <component
-                    :is="component.template_name"
-                    v-for="(component, index) in channel.home.filter(c => ['twoPicture', 'newSingleImage', 'shopFloor'].some(k => k === c.template_name) )"
-                    :value="component.data"
-                    :key="index"></component>
-            </div>
+            <scroller ref="scroller" @loading="loading">
+                <div class="resources">
+                    <component
+                        :is="component.template_name"
+                        v-for="(component, index) in channel.home.filter(c => ['twoPicture', 'newSingleImage', 'shopFloor', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
+                        :value="component.data"
+                        :key="index"></component>
+                </div>
+            </scroller>
         </layout-body>
     </div>
 </template>
@@ -32,7 +34,8 @@ import {
 import {
     ResourceTwoImage,
     ResourceSingleImage,
-    ResourceShopFloor
+    ResourceShopFloor,
+    ResourceProductList
 } from 'components/resources';
 import {SearchSlider} from 'components/search';
 import {mapState} from 'vuex';
@@ -59,11 +62,17 @@ export default {
         searchSliderSwitch() {
             this.searchSlider = !this.searchSlider;
         },
+        async loading() {
+            console.log('loading')
+            await this.$store.dispatch(FETCH_HOME_REQUEST);
+            this.$refs.scroller.stop();
+        }
     },
     components: {
         twoPicture: ResourceTwoImage,
         newSingleImage: ResourceSingleImage,
         shopFloor: ResourceShopFloor,
+        BlkNewProductFloorResource: ResourceProductList,
         SearchSlider,
         HomeSlider
     }

@@ -556,7 +556,7 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-syntax-async-functions@^6.8.0:
+babel-plugin-syntax-async-functions@^6.13.0, babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "http://npm.yoho.cn/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"