feat(mars-build): add page api onPageScroll and onTabItemTap (#6)

* feat(pageApi): add new page api and merge some feature * fix(px): fix to 15px
max-team · Apr 10, 2019 · 482e39c · 482e39c
1 parent 615fbbd
commit 482e39c
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 58 deletions.
diff --git a/packages/mars-build/src/compiler/script/script-h5.js b/packages/mars-build/src/compiler/script/script-h5.js
@@ -151,7 +151,7 @@ exports.compileApp = function (options) {
     const {
         content: cssContent,
         attrs
-    } = appStyle || {};
+    } = appStyle;
 
     contentStr = `
 <template>

diff --git a/packages/mars-build/src/gulp-mars-h5.js b/packages/mars-build/src/gulp-mars-h5.js
@@ -86,7 +86,7 @@ function compile(file, opt) {
                     let basicCompMap = {};
                     delToVueTag(el, options, basicCompMap);
                     if (!el.parent) {
-                        el.attrsMap['style'] = `backgroundColor: ${config.backgroundColor || null};`;
+                        el.attrsMap.style = `backgroundColor: ${config.backgroundColor || null};`;
                     }
                     componentSet = Object.assign(componentSet, basicCompMap);
                 }
@@ -123,8 +123,9 @@ function compile(file, opt) {
             appStyle: styles && styles[0] // 用户app.vue中的style
                 ? {
                     content: styles[0].content,
-                    attrs: styles[0].attrs.lang ? styles[0].attrs.lang : ''}
-                : null,
+                    attrs: styles[0].attrs.lang ? styles[0].attrs.lang : ''
+                }
+                : {},
             script: appScript && appScript.content || '',
             appScriptApi: scriptRet.pageLifeApi, // 用户app.vue中的生命周期
             template: appTemplate && appTemplate.content || '',
@@ -174,7 +175,11 @@ function compile(file, opt) {
 
     // 处理style
     const h5StylesArr = styles.filter(item => !item.attrs || (!item.attrs.target || item.attrs.target === 'h5'));
-    const styleContent = h5StylesArr.reduce((styleStr, {attrs, content, lang}) => `${styleStr}
+    const styleContent = h5StylesArr.reduce((styleStr, {
+        attrs,
+        content,
+        lang
+    }) => `${styleStr}
 <style ${lang ? `lang="${lang}"` : ''} scoped>
     ${content}
 </style>`, '');
@@ -200,7 +205,9 @@ ${styleContent || ''}
         if (Object.keys(componentSet).length > 0) {
             const componentsFile = new Vinyl({
                 path: opt.dest + '/components.js',
-                _info_: {componentSet}
+                _info_: {
+                    componentSet
+                }
             });
             compileComponents(componentsFile, opt);
             componentsFile.writeFileSync();
@@ -225,7 +232,8 @@ function gulpPrefixer(opt) {
         if (file.isBuffer()) {
             try {
                 compile(file, opt);
-            } catch (e) {
+            }
+            catch (e) {
                 log.error('[COMPILE ERROR]:', e);
             }
         }

diff --git a/packages/mars-build/src/h5/template/App.vue b/packages/mars-build/src/h5/template/App.vue
@@ -1,5 +1,3 @@
-
-
 <template>
     <div
         id="mars"
@@ -24,8 +22,9 @@
             >
                 <pull-down-refresh
                     ref="refresherHandler"
-                    @on-refresh="handleRefresh"
+                    @pull-down-refresh="handleRefresh"
                     @reach-bottom="handleReachBottom"
+                    @page-scroll="handlePageScroll"
                     :enablePullDownRefresh="enablePullDownRefresh"
                     :enableReachBottom="enableReachBottom"
                     :onReachBottomDistance="onReachBottomDistance"
@@ -62,12 +61,14 @@
             </div>
             <tab-bar
                 v-if="tabList.length > 0 && showTabBar ? customShowTabBar : false"
+                @tab-item-tap="handleTabItemTap"
                 :tabList="tabList"
                 :currentPath="currentPath"
                 :color="tabBarColor"
                 :selectedColor="tabBarSelectedColor"
                 :borderStyle="tabBarBorderStyle"
-                :backgroundColor="tabBarBackgroundColor"/>
+                :backgroundColor="tabBarBackgroundColor"
+                />
         </div>
     </div>
 </template>
@@ -247,6 +248,18 @@ export default {
             this.transitionStatus === 'end'
             && this.$refs.currentRouter.onReachBottom
             && this.$refs.currentRouter.onReachBottom();
+        },
+
+        handlePageScroll(data) {
+            this.transitionStatus === 'end'
+            && this.$refs.currentRouter.onPageScroll
+            && this.$refs.currentRouter.onPageScroll(data);
+        },
+
+        handleTabItemTap(item) {
+            this.transitionStatus === 'end'
+            && this.$refs.currentRouter.onTabItemTap
+            && this.$refs.currentRouter.onTabItemTap(item);
         }
     }
 }
@@ -315,6 +328,4 @@ export default {
     }
 }
 
-</style>
-
-
+</style>
diff --git a/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue b/packages/mars-build/src/h5/template/app-components/PullDownRefresh/PullDownRefresh.vue
@@ -79,11 +79,11 @@ export default {
         this.scroller = this.$refs.scroller;
         this.container = window;
         this.enablePullDownRefresh && this.initTouch();
-        this.enableReachBottom && this.initScroll();
+        this.initScroll();
     },
     updated() {
         this.enablePullDownRefresh ? (this.initTouch()) : (this.detachTouch());
-        this.enableReachBottom ? (this.initScroll()) : (this.detachScroll());
+        // this.enableReachBottom ? (this.initScroll()) : (this.detachScroll());
     },
     methods: {
         initTouch() {
@@ -116,14 +116,18 @@ export default {
             window.removeEventListener('touchcancel', onTouchCancel);
         },
         initScroll() {
+            this.scrollHandler = null;
+            window.addEventListener('scroll', this.onScroll);
+        },
+        onScroll() {
+            this.$emit('page-scroll', {
+                scrollTop: window.pageYOffset
+            });
             if (!this.enableReachBottom) {
                 return;
             }
-            this.scrollHandler = null;
-            window.addEventListener('scroll', this.reachBottom);
-        },
-        reachBottom() {
             this.containerHeight = this.container.offsetHeight;
+            
             if (this.scrollHandler) {
                 clearTimeout(this.scrollHandler);
                 this.scrollHandler = null;
@@ -139,7 +143,7 @@ export default {
         },
         detachScroll() {
             this.scrollHandler = null;
-            window.removeEventListener('scroll', this.reachBottom);
+            window.removeEventListener('scroll', this.onScroll);
         },
         onTouchStart(e) {
             if (this.loading) {
@@ -177,7 +181,7 @@ export default {
             that.loading = true;
             this.currentStep = STATUS_LOADING;
             this.height = this.offset;
-            that.$emit('on-refresh');
+            that.$emit('pull-down-refresh');
         },
 
         stopPullDownRefresh() {

diff --git a/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue b/packages/mars-build/src/h5/template/app-components/TabBar/TabBar.vue
@@ -20,6 +20,7 @@
             <div
                 v-if="item.iconPath"
                 class="tab-item icon-and-text"
+                @click="tap(item, index)"
             >
                 <div
                     class="tab-item-icon"
@@ -78,6 +79,15 @@ export default {
             type: String,
             default: '#fff'
         }
+    },
+    methods: {
+        tap(item, index) {
+            this.$emit('tab-item-tap', {
+                index: `${index}`,
+                text: item.text,
+                pagePath: item.pagePath.replace(/^\//, '')
+            });
+        }
     }
 }
 </script>
@@ -149,4 +159,3 @@ export default {
     background-size: cover;
 }
 </style>
-
diff --git a/...-build/src/h5/template/browser-history.js → ...s-build/src/h5/template/browserHistory.js b/...-build/src/h5/template/browser-history.js → ...s-build/src/h5/template/browserHistory.js
diff --git a/packages/mars-build/src/h5/template/main.js b/packages/mars-build/src/h5/template/main.js
@@ -36,4 +36,4 @@ const vm = new Vue({
 initGlobalApi(Vue, vm);
 
 // 将初始化后的$api赋值给getApp
-marsAppData['$api'] = vm.$api;
+marsAppData.$api = vm.$api;
diff --git a/packages/mars-build/src/h5/template/mars-base.css b/packages/mars-build/src/h5/template/mars-base.css
@@ -3,11 +3,10 @@
     padding: 0;
     margin: 0;
 }
-
-html {
-    font-size: 100px;
-}
-
 body {
     font-size: 15px;
 }
+
+a {
+    text-decoration: none;
+}
diff --git a/packages/mars-build/src/h5/template/router.js b/packages/mars-build/src/h5/template/router.js
@@ -5,7 +5,7 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import browserHistory from './browser-history';
+import browserHistory from './browserHistory';
 
 Vue.use(VueRouter);
 const router = new VueRouter({
@@ -21,11 +21,12 @@ Vue.prototype.isBack = false;
 Vue.prototype.fromRouterPosY = 0;
 router.beforeEach(function (to, from, next) {
     if (!to.query._) {
-        to.query['_'] = guid();
+        to.query._ = guid();
     }
+
     Vue.prototype.currentRoute = [{
-        route: to.path,
-        uri: to.path
+        route: to.path.replace(/^\//, ''),
+        uri: to.path.replace(/^\//, '')
     }];
     let toPath = decodeURI(to.fullPath); // 兼容 vue-router 浏览器前进/返回时的 decodeURI操作
     let fromPath = decodeURI(from.fullPath);
@@ -41,6 +42,7 @@ router.beforeEach(function (to, from, next) {
             delete query._;
         }
     }
+
     toPath = decodeURI(to.fullPath);
     fromPath = decodeURI(from.fullPath);
     // 记录浏览历史
@@ -50,12 +52,14 @@ router.beforeEach(function (to, from, next) {
         if (browserHistoryArr[i] && browserHistoryArr[i].path === toPath) {
             browserHistoryIndex = i;
         }
+
     }
 
     for (let i = browserHistoryLength; i >= 0; i--) {
         if (browserHistoryArr[i] && browserHistoryArr[i].path === fromPath) {
             browserHistoryArr[i].pos = window.pageYOffset;
         }
+
     }
 
     if (browserHistoryLength > 1
@@ -71,7 +75,9 @@ router.beforeEach(function (to, from, next) {
         if (browserHistory.length === 0
             || -1 === browserHistoryIndex
             || browserHistoryIndex !== browserHistoryLength - 1) {
-            browserHistoryArr.push({path: toPath});
+            browserHistoryArr.push({
+                path: toPath
+            });
         }
     }
     // // 没有from.name 且 browserHistory.length !== 0，表示从畅听跳转到其他页面又跳转回畅听
@@ -80,7 +86,6 @@ router.beforeEach(function (to, from, next) {
     //     browserHistoryArr.push({path: to.fullPath});
     // }
     browserHistory.set(browserHistoryArr);
-    next();
     router.app.$nextTick(() => {
         const browserHistoryArr = browserHistory.list;
         const browserHistoryLength = browserHistory.length;
@@ -89,9 +94,8 @@ router.beforeEach(function (to, from, next) {
             && browserHistoryLast.pos) {
             Vue.prototype.fromRouterPosY = browserHistoryLast.pos;
         }
-        else {
-            window.scrollTo(0, 0);
-        }
+
     });
+    next();
 });
 export default router;