fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 20df8668f328842713889798c0f01cad02e4707f 1 parent 27650ba0

scoller

Inline Side-by-side
Showing 12 changed files with 150 additions and 17 deletions
@@ -5,6 +5,8 @@ @@ -5,6 +5,8 @@
5 "transform-vue-jsx", 5 "transform-vue-jsx",
6 "transform-object-rest-spread", 6 "transform-object-rest-spread",
7 "syntax-dynamic-import", 7 "syntax-dynamic-import",
8 - "transform-class-properties" 8 + "transform-class-properties",
  9 + "syntax-async-functions",
  10 + "transform-async-to-generator"
9 ] 11 ]
10 } 12 }
@@ -25,6 +25,7 @@ @@ -25,6 +25,7 @@
25 "license": "MIT", 25 "license": "MIT",
26 "dependencies": { 26 "dependencies": {
27 "axios": "^0.16.2", 27 "axios": "^0.16.2",
  28 + "babel-plugin-transform-async-to-generator": "^6.24.1",
28 "babel-plugin-transform-class-properties": "^6.24.1", 29 "babel-plugin-transform-class-properties": "^6.24.1",
29 "babel-polyfill": "^6.23.0", 30 "babel-polyfill": "^6.23.0",
30 "bluebird": "^3.4.2", 31 "bluebird": "^3.4.2",
@@ -61,6 +62,7 @@ @@ -61,6 +62,7 @@
61 "babel-core": "^6.24.1", 62 "babel-core": "^6.24.1",
62 "babel-eslint": "^7.2.3", 63 "babel-eslint": "^7.2.3",
63 "babel-loader": "^7.0.0", 64 "babel-loader": "^7.0.0",
  65 + "babel-plugin-syntax-async-functions": "^6.13.0",
64 "babel-plugin-syntax-dynamic-import": "^6.18.0", 66 "babel-plugin-syntax-dynamic-import": "^6.18.0",
65 "babel-plugin-syntax-jsx": "^6.18.0", 67 "babel-plugin-syntax-jsx": "^6.18.0",
66 "babel-plugin-transform-object-rest-spread": "^6.26.0", 68 "babel-plugin-transform-object-rest-spread": "^6.26.0",
1 import HeaderBox from './header-box'; 1 import HeaderBox from './header-box';
2 import LayoutBody from './layout-body'; 2 import LayoutBody from './layout-body';
3 import LazyHtml from './lazy-html'; 3 import LazyHtml from './lazy-html';
  4 +import Scroller from './scroller';
4 5
5 export default { 6 export default {
6 HeaderBox, 7 HeaderBox,
7 LayoutBody, 8 LayoutBody,
8 - LazyHtml 9 + LazyHtml,
  10 + Scroller
9 }; 11 };
  1 +<template>
  2 + <div class="scroller-box">
  3 + <div
  4 + class="scroller-content"
  5 + ref="scroller"
  6 + :style="scrollerStyle"
  7 + @touchstart="touchstart"
  8 + @touchmove="touchmove"
  9 + @touchend="touchend">
  10 + <div class="scroller-top" :style="styleTop"></div>
  11 + <slot></slot>
  12 + </div>
  13 + </div>
  14 +</template>
  15 +
  16 +<script>
  17 +export default {
  18 + name: 'Scroller',
  19 + data() {
  20 + return {
  21 + distance: 0,
  22 + transition: false,
  23 + direction: '',
  24 + isLoading: false,
  25 + styleTop: {}
  26 + };
  27 + },
  28 + computed: {
  29 + scrollerStyle() {
  30 + const style = {};
  31 +
  32 + if (this.distance) {
  33 + style.transform = `translate(0px, ${this.distance}px)`;
  34 + }
  35 + if (this.transition) {
  36 + style.transition = 'transform .2s ease';
  37 + }
  38 + return style;
  39 + }
  40 + },
  41 + methods: {
  42 + loading() {
  43 + this.isLoading = true;
  44 + },
  45 + stop() {
  46 + setTimeout(() => {
  47 + this.isLoading = false;
  48 + this.styleTop = {
  49 + transition: 'margin .2s ease'
  50 + };
  51 + }, 500);
  52 + },
  53 + touchstart(e) {
  54 + this.startY = e.touches[0].clientY;
  55 + if (this.$el.scrollTop === 0) {
  56 + this.transition = false;
  57 + this.topStatus = '';
  58 + }
  59 + },
  60 + touchmove(e) {
  61 + this.currentY = e.touches[0].clientY;
  62 + let distance = (this.currentY - this.startY) / 2;
  63 +
  64 + this.direction = distance > 0 ? 'down' : 'up';
  65 +
  66 + if (this.direction === 'down' && this.$el.scrollTop === 0) {
  67 + this.distance = distance;
  68 + if (this.distance > 50) {
  69 + this.topStatus = 'drag';
  70 + }
  71 + }
  72 + },
  73 + touchend() {
  74 + if (this.direction === 'down' && this.$el.scrollTop === 0) {
  75 + this.transition = true;
  76 + if (this.topStatus) {
  77 + this.styleTop = {
  78 + marginTop: '0'
  79 + };
  80 + }
  81 + if (this.distance > 50 && !this.isLoading) {
  82 + this.isLoading = true;
  83 + this.$emit('loading');
  84 + }
  85 + this.distance = 0;
  86 + }
  87 + }
  88 + }
  89 +};
  90 +</script>
  91 +
  92 +<style lang="scss">
  93 +.scroller-box {
  94 + position: absolute;
  95 + top: 0;
  96 + right: 0;
  97 + left: 0;
  98 + bottom: 0;
  99 + overflow-y: auto;
  100 +}
  101 +.scroller-top {
  102 + width: 87px;
  103 + height: 66px;
  104 + margin: 0 auto;
  105 + margin-top: -66px;
  106 + background-image: url(~statics/img/pull_sprite.png);
  107 + background-position: -2320px 0;
  108 + background-repeat: no-repeat;
  109 + background-size: 2494px 66px;
  110 + animation: loadingScroller 1s steps(29) .5s infinite;
  111 +}
  112 +@keyframes loadingScroller {
  113 + 0% { background-position: 0 0; }
  114 + 100% { background-position: -2494px 0; }
  115 +}
  116 +</style>
1 <template> 1 <template>
2 <resource> 2 <resource>
3 <ul class="resource-products"> 3 <ul class="resource-products">
4 - <li class="product-item" v-for="(item, index) in value" :key="index"> 4 + <li class="product-item" v-for="(item, index) in value.list" :key="index">
5 <img-format :src="item.default_images" :w="94" :h="125"></img-format> 5 <img-format :src="item.default_images" :w="94" :h="125"></img-format>
6 - <p class="brand ellipsis" v-if="item.brand_name">{{item.brand_name}}</p>  
7 - <p class="title ellipsis" v-if="item.product_name">{{item.product_name}}</p>  
8 - <p class="price ellipsis" v-if="item.sales_price">￥{{item.sales_price}}</p> 6 + <div class="ellipsis">
  7 + <p class="brand" v-if="item.brand_name">{{item.brand_name}}</p>
  8 + <p class="title" v-if="item.product_name">{{item.product_name}}</p>
  9 + <p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
  10 + </div>
9 </li> 11 </li>
10 </ul> 12 </ul>
11 </resource> 13 </resource>
@@ -17,7 +19,7 @@ import Resource from './resource'; @@ -17,7 +19,7 @@ import Resource from './resource';
17 export default { 19 export default {
18 name: 'ResourceProductList', 20 name: 'ResourceProductList',
19 props: { 21 props: {
20 - value: Array 22 + value: Object
21 }, 23 },
22 computed: { 24 computed: {
23 }, 25 },
@@ -43,7 +45,7 @@ export default { @@ -43,7 +45,7 @@ export default {
43 height: 250px; 45 height: 250px;
44 } 46 }
45 47
46 - .ellipsis { 48 + .ellipsis>p {
47 text-overflow: ellipsis; 49 text-overflow: ellipsis;
48 white-space: nowrap; 50 white-space: nowrap;
49 overflow: hidden; 51 overflow: hidden;
@@ -14,13 +14,15 @@ @@ -14,13 +14,15 @@
14 <i class="icon icon-search-new" @click="searchSliderSwitch"></i> 14 <i class="icon icon-search-new" @click="searchSliderSwitch"></i>
15 </span> 15 </span>
16 </header-box> 16 </header-box>
17 - <div class="resources">  
18 - <component  
19 - :is="component.template_name"  
20 - v-for="(component, index) in channel.home.filter(c => ['twoPicture', 'newSingleImage', 'shopFloor'].some(k => k === c.template_name) )"  
21 - :value="component.data"  
22 - :key="index"></component>  
23 - </div> 17 + <scroller ref="scroller" @loading="loading">
  18 + <div class="resources">
  19 + <component
  20 + :is="component.template_name"
  21 + v-for="(component, index) in channel.home.filter(c => ['twoPicture', 'newSingleImage', 'shopFloor', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
  22 + :value="component.data"
  23 + :key="index"></component>
  24 + </div>
  25 + </scroller>
24 </layout-body> 26 </layout-body>
25 </div> 27 </div>
26 </template> 28 </template>
@@ -32,7 +34,8 @@ import { @@ -32,7 +34,8 @@ import {
32 import { 34 import {
33 ResourceTwoImage, 35 ResourceTwoImage,
34 ResourceSingleImage, 36 ResourceSingleImage,
35 - ResourceShopFloor 37 + ResourceShopFloor,
  38 + ResourceProductList
36 } from 'components/resources'; 39 } from 'components/resources';
37 import {SearchSlider} from 'components/search'; 40 import {SearchSlider} from 'components/search';
38 import {mapState} from 'vuex'; 41 import {mapState} from 'vuex';
@@ -59,11 +62,17 @@ export default { @@ -59,11 +62,17 @@ export default {
59 searchSliderSwitch() { 62 searchSliderSwitch() {
60 this.searchSlider = !this.searchSlider; 63 this.searchSlider = !this.searchSlider;
61 }, 64 },
  65 + async loading() {
  66 + console.log('loading')
  67 + await this.$store.dispatch(FETCH_HOME_REQUEST);
  68 + this.$refs.scroller.stop();
  69 + }
62 }, 70 },
63 components: { 71 components: {
64 twoPicture: ResourceTwoImage, 72 twoPicture: ResourceTwoImage,
65 newSingleImage: ResourceSingleImage, 73 newSingleImage: ResourceSingleImage,
66 shopFloor: ResourceShopFloor, 74 shopFloor: ResourceShopFloor,
  75 + BlkNewProductFloorResource: ResourceProductList,
67 SearchSlider, 76 SearchSlider,
68 HomeSlider 77 HomeSlider
69 } 78 }
This diff could not be displayed because it is too large.
@@ -556,7 +556,7 @@ babel-plugin-check-es2015-constants@^6.22.0: @@ -556,7 +556,7 @@ babel-plugin-check-es2015-constants@^6.22.0:
556 dependencies: 556 dependencies:
557 babel-runtime "^6.22.0" 557 babel-runtime "^6.22.0"
558 558
559 -babel-plugin-syntax-async-functions@^6.8.0: 559 +babel-plugin-syntax-async-functions@^6.13.0, babel-plugin-syntax-async-functions@^6.8.0:
560 version "6.13.0" 560 version "6.13.0"
561 resolved "http://npm.yoho.cn/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" 561 resolved "http://npm.yoho.cn/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
562 562