fe / yohoblk-wap · Commits

Go to a project

Authored by 徐炜
Commit 8a52317f9427aff19866421aae5868bf14247075 1 parent 4e73b585

LazyLoad优化

Inline Side-by-side
Showing 22 changed files with 207 additions and 181 deletions
1 -  
2 -# Created by https://www.gitignore.io/api/node,webstorm,netbeans,sublimetext,vim  
3 -  
4 -### Node ###  
5 -# Logs  
6 -logs  
7 -*.log  
8 -npm-debug.log*  
9 -  
10 -# Runtime data  
11 -pids  
12 -*.pid  
13 -*.seed  
14 -  
15 -# Directory for instrumented libs generated by jscoverage/JSCover  
16 -lib-cov  
17 -  
18 -# Coverage directory used by tools like istanbul  
19 -coverage  
20 -  
21 -# nyc test coverage  
22 -.nyc_output  
23 -  
24 -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)  
25 -.grunt  
26 -  
27 -# node-waf configuration  
28 -.lock-wscript  
29 -  
30 -# Compiled binary addons (http://nodejs.org/api/addons.html)  
31 -build/Release  
32 -  
33 -# Dependency directories  
34 -node_modules  
35 -jspm_packages  
36 -  
37 -# Optional npm cache directory  
38 -.npm  
39 -  
40 -# Optional REPL history  
41 -.node_repl_history  
42 -  
43 -  
44 -### WebStorm ###  
45 -# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm  
46 -# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839  
47 -.idea/  
48 -# User-specific stuff:  
49 -.idea/workspace.xml  
50 -.idea/tasks.xml  
51 -.idea/dictionaries  
52 -.idea/vcs.xml  
53 -.idea/jsLibraryMappings.xml  
54 -  
55 -# Sensitive or high-churn files:  
56 -.idea/dataSources.ids  
57 -.idea/dataSources.xml  
58 -.idea/dataSources.local.xml  
59 -.idea/sqlDataSources.xml  
60 -.idea/dynamic.xml  
61 -.idea/uiDesigner.xml  
62 -  
63 -# Gradle:  
64 -.idea/gradle.xml  
65 -.idea/libraries  
66 -  
67 -# Mongo Explorer plugin:  
68 -.idea/mongoSettings.xml  
69 -  
70 -## File-based project format:  
71 -*.iws  
72 -  
73 -## Plugin-specific files:  
74 -  
75 -# IntelliJ  
76 -/out/  
77 -  
78 -# mpeltonen/sbt-idea plugin  
79 -.idea_modules/  
80 -  
81 -# JIRA plugin  
82 -atlassian-ide-plugin.xml  
83 -  
84 -# Crashlytics plugin (for Android Studio and IntelliJ)  
85 -com_crashlytics_export_strings.xml  
86 -crashlytics.properties  
87 -crashlytics-build.properties  
88 -fabric.properties  
89 -  
90 -### WebStorm Patch ###  
91 -# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721  
92 -  
93 -# *.iml  
94 -# modules.xml  
95 -  
96 -  
97 -### NetBeans ###  
98 -nbproject/private/  
99 -build/  
100 -nbbuild/  
101 -dist/  
102 -nbdist/  
103 -nbactions.xml  
104 -.nb-gradle/  
105 -  
106 -  
107 -### SublimeText ###  
108 -# cache files for sublime text  
109 -*.tmlanguage.cache  
110 -*.tmPreferences.cache  
111 -*.stTheme.cache  
112 -  
113 -# workspace files are user-specific  
114 -*.sublime-workspace  
115 -  
116 -# project files should be checked into the repository, unless a significant  
117 -# proportion of contributors will probably not be using SublimeText  
118 -# *.sublime-project  
119 -  
120 -# sftp configuration file  
121 -sftp-config.json  
122 -  
123 -  
124 -### Vim ###  
125 -# swap  
126 -[._]*.s[a-w][a-z]  
127 -[._]s[a-w][a-z]  
128 -# session  
129 -Session.vim  
130 -# temporary  
131 -.netrwhist  
132 -*~  
133 -# auto-generated tag files  
134 -tags  
135 -  
136 -### VS Code ###  
137 -.vscode/  
138 -  
139 -### YOHO ###  
140 -public/dist/  
141 -public/css/*  
142 -public/bundle/*  
143 -.eslintcache  
144 -*.log.*  
145 -nbproject/*  
146 -.DS_Store 1 +
  2 +# Created by https://www.gitignore.io/api/node,webstorm,netbeans,sublimetext,vim
  3 +
  4 +### Node ###
  5 +# Logs
  6 +logs
  7 +*.log
  8 +npm-debug.log*
  9 +
  10 +# Runtime data
  11 +pids
  12 +*.pid
  13 +*.seed
  14 +
  15 +# Directory for instrumented libs generated by jscoverage/JSCover
  16 +lib-cov
  17 +
  18 +# Coverage directory used by tools like istanbul
  19 +coverage
  20 +
  21 +# nyc test coverage
  22 +.nyc_output
  23 +
  24 +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
  25 +.grunt
  26 +
  27 +# node-waf configuration
  28 +.lock-wscript
  29 +
  30 +# Compiled binary addons (http://nodejs.org/api/addons.html)
  31 +build/Release
  32 +
  33 +# Dependency directories
  34 +node_modules
  35 +jspm_packages
  36 +
  37 +# Optional npm cache directory
  38 +.npm
  39 +
  40 +# Optional REPL history
  41 +.node_repl_history
  42 +
  43 +
  44 +### WebStorm ###
  45 +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
  46 +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
  47 +.idea/
  48 +# User-specific stuff:
  49 +.idea/workspace.xml
  50 +.idea/tasks.xml
  51 +.idea/dictionaries
  52 +.idea/vcs.xml
  53 +.idea/jsLibraryMappings.xml
  54 +
  55 +# Sensitive or high-churn files:
  56 +.idea/dataSources.ids
  57 +.idea/dataSources.xml
  58 +.idea/dataSources.local.xml
  59 +.idea/sqlDataSources.xml
  60 +.idea/dynamic.xml
  61 +.idea/uiDesigner.xml
  62 +
  63 +# Gradle:
  64 +.idea/gradle.xml
  65 +.idea/libraries
  66 +
  67 +# Mongo Explorer plugin:
  68 +.idea/mongoSettings.xml
  69 +
  70 +## File-based project format:
  71 +*.iws
  72 +
  73 +## Plugin-specific files:
  74 +
  75 +# IntelliJ
  76 +/out/
  77 +
  78 +# mpeltonen/sbt-idea plugin
  79 +.idea_modules/
  80 +
  81 +# JIRA plugin
  82 +atlassian-ide-plugin.xml
  83 +
  84 +# Crashlytics plugin (for Android Studio and IntelliJ)
  85 +com_crashlytics_export_strings.xml
  86 +crashlytics.properties
  87 +crashlytics-build.properties
  88 +fabric.properties
  89 +
  90 +### WebStorm Patch ###
  91 +# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
  92 +
  93 +# *.iml
  94 +# modules.xml
  95 +
  96 +
  97 +### NetBeans ###
  98 +nbproject/private/
  99 +build/
  100 +nbbuild/
  101 +dist/
  102 +nbdist/
  103 +nbactions.xml
  104 +.nb-gradle/
  105 +
  106 +
  107 +### SublimeText ###
  108 +# cache files for sublime text
  109 +*.tmlanguage.cache
  110 +*.tmPreferences.cache
  111 +*.stTheme.cache
  112 +
  113 +# workspace files are user-specific
  114 +*.sublime-workspace
  115 +
  116 +# project files should be checked into the repository, unless a significant
  117 +# proportion of contributors will probably not be using SublimeText
  118 +# *.sublime-project
  119 +
  120 +# sftp configuration file
  121 +sftp-config.json
  122 +
  123 +
  124 +### Vim ###
  125 +# swap
  126 +[._]*.s[a-w][a-z]
  127 +[._]s[a-w][a-z]
  128 +# session
  129 +Session.vim
  130 +# temporary
  131 +.netrwhist
  132 +*~
  133 +# auto-generated tag files
  134 +tags
  135 +
  136 +### VS Code ###
  137 +.vscode/
  138 +
  139 +### YOHO ###
  140 +public/dist/
  141 +public/css/*
  142 +public/bundle/*
  143 +.eslintcache
  144 +*.log.*
  145 +nbproject/*
  146 +.DS_Store
  147 +.devhost
@@ -22,6 +22,7 @@ const session = require('express-session'); @@ -22,6 +22,7 @@ const session = require('express-session');
22 const memcached = require('connect-memcached'); 22 const memcached = require('connect-memcached');
23 const hbs = require('express-handlebars'); 23 const hbs = require('express-handlebars');
24 const pkg = require('./package.json'); 24 const pkg = require('./package.json');
  25 +const devtools = require('./doraemon/middleware/devtools');
25 26
26 const app = express(); 27 const app = express();
27 const MemcachedStore = memcached(session); 28 const MemcachedStore = memcached(session);
@@ -40,6 +41,10 @@ global.doraemon = path.resolve('./doraemon'); @@ -40,6 +41,10 @@ global.doraemon = path.resolve('./doraemon');
40 41
41 const logger = global.yoho.logger; 42 const logger = global.yoho.logger;
42 43
  44 +if (app.locals.devEnv) {
  45 + app.use(devtools());
  46 +}
  47 +
43 app.set('view engine', '.hbs'); 48 app.set('view engine', '.hbs');
44 app.set('views', './doraemon/views'); 49 app.set('views', './doraemon/views');
45 app.engine('.hbs', hbs({ 50 app.engine('.hbs', hbs({
@@ -15,9 +15,9 @@ @@ -15,9 +15,9 @@
15 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window); 15 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
16 </script> 16 </script>
17 {{#if devEnv}} 17 {{#if devEnv}}
18 - <link rel="stylesheet" media="all" href="//localhost:5004/css/index.css"> 18 + <link rel="stylesheet" media="all" href="//{{devHost}}:5004/css/index.css">
19 {{#unless noLocalCSS}} 19 {{#unless noLocalCSS}}
20 - <link rel="stylesheet" media="all" href="//localhost:5004/{{module}}.{{page}}.css"> 20 + <link rel="stylesheet" media="all" href="//{{devHost}}:5004/{{module}}.{{page}}.css">
21 {{/unless}} 21 {{/unless}}
22 {{^}} 22 {{^}}
23 <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-wap/{{version}}/index.css"> 23 <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-wap/{{version}}/index.css">
@@ -32,9 +32,9 @@ @@ -32,9 +32,9 @@
32 </div> 32 </div>
33 33
34 {{#if devEnv}} 34 {{#if devEnv}}
35 - <script src="//localhost:5004/libs.js"></script> 35 + <script src="//{{devHost}}:5004/libs.js"></script>
36 {{#unless noLocalJS}} 36 {{#unless noLocalJS}}
37 - <script src="//localhost:5004/{{module}}.{{page}}.js"></script> 37 + <script src="//{{devHost}}:5004/{{module}}.{{page}}.js"></script>
38 {{/unless}} 38 {{/unless}}
39 {{^}} 39 {{^}}
40 <script src="//cdn.yoho.cn/yohoblk-wap/{{version}}/libs.js"></script> 40 <script src="//cdn.yoho.cn/yohoblk-wap/{{version}}/libs.js"></script>
@@ -11,7 +11,7 @@ const brandListBox = require('channel/brand-list-box.vue'); @@ -11,7 +11,7 @@ const brandListBox = require('channel/brand-list-box.vue');
11 11
12 require('common/vue-filter')(Vue); 12 require('common/vue-filter')(Vue);
13 13
14 -Vue.use(lazyload); 14 +Vue.use(lazyload, { preLoad: 3 });
15 15
16 new Vue({ 16 new Vue({
17 el: '#brand-list', 17 el: '#brand-list',
@@ -4,7 +4,7 @@ const cateRes = require('channel/cate-resource-box.vue'); @@ -4,7 +4,7 @@ const cateRes = require('channel/cate-resource-box.vue');
4 4
5 require('common/vue-filter')(Vue); 5 require('common/vue-filter')(Vue);
6 6
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 8
9 new Vue({ 9 new Vue({
10 el: '#cate-resource', 10 el: '#cate-resource',
@@ -6,7 +6,7 @@ const channel = require('channel/index.vue'); @@ -6,7 +6,7 @@ const channel = require('channel/index.vue');
6 6
7 require('common/vue-filter')(Vue); 7 require('common/vue-filter')(Vue);
8 8
9 -Vue.use(lazyload); 9 +Vue.use(lazyload, { preLoad: 3 });
10 Vue.use(infinitScroll); 10 Vue.use(infinitScroll);
11 11
12 new Vue({ 12 new Vue({
@@ -5,7 +5,7 @@ const sidebar = require('channel/sidebar.vue'); @@ -5,7 +5,7 @@ const sidebar = require('channel/sidebar.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue({ 10 new Vue({
11 el: '#sidebar', 11 el: '#sidebar',
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 7
8 module.exports = (Vue) => { 8 module.exports = (Vue) => {
9 Vue.directive('lazy-html', function(html) { 9 Vue.directive('lazy-html', function(html) {
  10 + // TODO 首屏幕不使用
10 html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img v-lazy="\'$1\'">'); 11 html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img v-lazy="\'$1\'">');
11 this.el.innerHTML = html; 12 this.el.innerHTML = html;
12 this.vm.$compile(this.el); 13 this.vm.$compile(this.el);
@@ -4,7 +4,7 @@ const directive = require('common/vue-directive'); @@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
4 const app = require('editorial/detail.vue'); 4 const app = require('editorial/detail.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 Vue.use(directive); 8 Vue.use(directive);
9 9
10 new Vue({ 10 new Vue({
@@ -8,7 +8,7 @@ const Vue = require('vue'); @@ -8,7 +8,7 @@ const Vue = require('vue');
8 const lazyload = require('vue-lazyload'); 8 const lazyload = require('vue-lazyload');
9 const infinitScroll = require('vue-infinite-scroll'); 9 const infinitScroll = require('vue-infinite-scroll');
10 10
11 -Vue.use(lazyload); 11 +Vue.use(lazyload, { preLoad: 3 });
12 Vue.use(infinitScroll); 12 Vue.use(infinitScroll);
13 require('common/vue-filter')(Vue); 13 require('common/vue-filter')(Vue);
14 14
@@ -17,4 +17,4 @@ new Vue({ @@ -17,4 +17,4 @@ new Vue({
17 } 17 }
18 }); 18 });
19 19
20 -Vue.use(lazyload); 20 +Vue.use(lazyload, { preLoad: 3 });
@@ -5,6 +5,6 @@ const exchange = require('me/exchange.vue'); @@ -5,6 +5,6 @@ const exchange = require('me/exchange.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue(exchange); 10 new Vue(exchange);
@@ -5,7 +5,7 @@ const refund = require('me/refund.vue'); @@ -5,7 +5,7 @@ const refund = require('me/refund.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue({ 10 new Vue({
11 el: '#refund', 11 el: '#refund',
@@ -4,7 +4,7 @@ const directive = require('common/vue-directive'); @@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
4 const app = require('product/detail/index.vue'); 4 const app = require('product/detail/index.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 Vue.use(directive); 8 Vue.use(directive);
9 9
10 new Vue({ 10 new Vue({
@@ -10,8 +10,9 @@ const lazyload = require('vue-lazyload'); @@ -10,8 +10,9 @@ const lazyload = require('vue-lazyload');
10 const shareBox = require('product/shop/share-box.vue'); 10 const shareBox = require('product/shop/share-box.vue');
11 11
12 require('common/vue-filter')(Vue); 12 require('common/vue-filter')(Vue);
13 -  
14 -Vue.use(lazyload); 13 +Vue.use(lazyload, {
  14 + preLoad: 3
  15 +});
15 16
16 new Vue({ 17 new Vue({
17 el: '#share', 18 el: '#share',
@@ -9,7 +9,9 @@ const lazyload = require('vue-lazyload'); @@ -9,7 +9,9 @@ const lazyload = require('vue-lazyload');
9 const infinitScroll = require('vue-infinite-scroll'); 9 const infinitScroll = require('vue-infinite-scroll');
10 10
11 require('common/vue-filter')(Vue); 11 require('common/vue-filter')(Vue);
12 -Vue.use(lazyload); 12 +Vue.use(lazyload, {
  13 + preLoad: 3
  14 +});
13 Vue.use(infinitScroll); 15 Vue.use(infinitScroll);
14 16
15 const shopBox = require('product/shop/shop-box.vue'); 17 const shopBox = require('product/shop/shop-box.vue');
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 </ul> 18 </ul>
19 <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p> 19 <p class="cardlist--loading text-center" v-show="inLoading">正在加载...</p>
20 <p class="cardlist--end text-center" v-show="atEnd ">--End--</p> 20 <p class="cardlist--end text-center" v-show="atEnd ">--End--</p>
21 - 21 +
22 <div class="empty-tip" v-show="empty"> 22 <div class="empty-tip" v-show="empty">
23 <i class="icon icon-search"></i> 23 <i class="icon icon-search"></i>
24 <p class="empty-tip-cn">未找到相关商品</p> 24 <p class="empty-tip-cn">未找到相关商品</p>
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 const lazyload = require('vue-lazyload'); 31 const lazyload = require('vue-lazyload');
32 const infinitScroll = require('vue-infinite-scroll'); 32 const infinitScroll = require('vue-infinite-scroll');
33 33
34 - Vue.use(lazyload); 34 + Vue.use(lazyload, { preLoad: 3 });
35 Vue.use(infinitScroll); 35 Vue.use(infinitScroll);
36 36
37 let bus = require('common/vue-bus'); 37 let bus = require('common/vue-bus');
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 23
24 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); 24 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
25 25
26 - Vue.use(lazyload); 26 + Vue.use(lazyload, { preLoad: 3 });
27 Vue.use(infinitScroll); 27 Vue.use(infinitScroll);
28 require('common/vue-filter')(Vue); 28 require('common/vue-filter')(Vue);
29 29
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 21
22 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); 22 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
23 23
24 - Vue.use(lazyload); 24 + Vue.use(lazyload, { preLoad: 3 });
25 Vue.use(infinitScroll); 25 Vue.use(infinitScroll);
26 require('common/vue-filter')(Vue); 26 require('common/vue-filter')(Vue);
27 27
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 const order = require('component/product/order.vue'); 18 const order = require('component/product/order.vue');
19 const list = require('component/product/list.vue'); 19 const list = require('component/product/list.vue');
20 20
21 - Vue.use(lazyload); 21 + Vue.use(lazyload, { preLoad: 3 });
22 Vue.use(infinitScroll); 22 Vue.use(infinitScroll);
23 23
24 require('common/vue-filter')(Vue); 24 require('common/vue-filter')(Vue);
1 <template> 1 <template>
2 - <top-bar :share-data="shareData"></top-bar> 2 + <top-bar :share-data="shareData" :show-top-bar="showTopBar"></top-bar>
  3 +
3 <shop-top :shop-info="shopInfo"></shop-top> 4 <shop-top :shop-info="shopInfo"></shop-top>
4 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'> 5 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'>
5 <goods-list :data="productList" :empty="empty"></goods-list> 6 <goods-list :data="productList" :empty="empty"></goods-list>
6 </div> 7 </div>
7 <filter :config="filterConfig" v-ref:filter></filter> 8 <filter :config="filterConfig" v-ref:filter></filter>
  9 + <div id="timer" style="position: fixed; z-index: 100; bottom: 0">{{timer}}</div>
8 </template> 10 </template>
9 <style> 11 <style>
10 #shop { 12 #shop {
@@ -34,9 +36,10 @@ @@ -34,9 +36,10 @@
34 return { 36 return {
35 shareData: {}, // 分享相关数据 37 shareData: {}, // 分享相关数据
36 shopInfo: {}, // 店铺介绍相关数据 38 shopInfo: {}, // 店铺介绍相关数据
37 - 39 + timer: 0,
38 sortConfig: {}, 40 sortConfig: {},
39 filterConfig: {}, 41 filterConfig: {},
  42 + showTopBar: false,
40 43
41 // query 44 // query
42 url: '/product/shop/goods.json', 45 url: '/product/shop/goods.json',
@@ -73,7 +76,7 @@ @@ -73,7 +76,7 @@
73 /* 获取店铺简介相关数据 */ 76 /* 获取店铺简介相关数据 */
74 getShopInfo() { 77 getShopInfo() {
75 $.get({ 78 $.get({
76 - async: false, 79 + // async: false,
77 url: '/product/shop/info.json', 80 url: '/product/shop/info.json',
78 data: { 81 data: {
79 domain: $shop.data('domain'), 82 domain: $shop.data('domain'),
@@ -103,6 +106,8 @@ @@ -103,6 +106,8 @@
103 } else { 106 } else {
104 this.shopInfo.showBrandInfo = false; 107 this.shopInfo.showBrandInfo = false;
105 } 108 }
  109 +
  110 + this.showTopBar = true;
106 }).fail(() => { 111 }).fail(() => {
107 tip('网络出错~'); 112 tip('网络出错~');
108 }); 113 });
@@ -177,6 +182,11 @@ @@ -177,6 +182,11 @@
177 self.$set('filter', val); 182 self.$set('filter', val);
178 self.$refs.filter.isVisible = false; 183 self.$refs.filter.isVisible = false;
179 }); 184 });
  185 + },
  186 + init() {
  187 + setInterval(()=> {
  188 + this.timer = new Date().getTime();
  189 + }, 1)
180 } 190 }
181 }; 191 };
182 192
1 <template> 1 <template>
2 - <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>  
3 - <template slot="right" v-on:scroll="">  
4 - <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>  
5 - <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>  
6 - <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>  
7 - <span class="icon" @click="showFilter()">&#xe60b;</span>  
8 - </template>  
9 - </cheader> 2 + <div :style="{display: topBarDisplay}">
  3 + <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>
  4 + <template slot="right" v-on:scroll="">
  5 + <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
  6 + <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
  7 + <span v-if="shareData.isBlkShop" class="icon" @click="goShare()">&#xe60e;</span>
  8 + <span class="icon" @click="showFilter()">&#xe60b;</span>
  9 + </template>
  10 + </cheader>
  11 + </div>
10 </template> 12 </template>
11 13
12 <style> 14 <style>
@@ -30,8 +32,9 @@ @@ -30,8 +32,9 @@
30 }, 32 },
31 props: { 33 props: {
32 shareData: { 34 shareData: {
33 - type: Object  
34 - } 35 + type: Object,
  36 + },
  37 + showTopBar: false
35 }, 38 },
36 computed: { 39 computed: {
37 title() { 40 title() {
@@ -42,6 +45,9 @@ @@ -42,6 +45,9 @@
42 } 45 }
43 46
44 return result; 47 return result;
  48 + },
  49 + topBarDisplay() {
  50 + return this.showTopBar ? 'block' : 'none';
45 } 51 }
46 }, 52 },
47 components: { 53 components: {