feat(build): 去除多余overflow，支持页面内sticky

max-team · Jun 21, 2019 · 1ef2fa9 · 1ef2fa9
1 parent a8ff4e0
commit 1ef2fa9
Showing 1 changed file with 73 additions and 72 deletions.
diff --git a/packages/mars-build/src/h5/template/MarsApp.vue b/packages/mars-build/src/h5/template/MarsApp.vue
@@ -1,81 +1,83 @@
 <template>
-    <div
-        id="mars"
-        :class="[transitionStatus === 'enter' ? 'transition-status-enter' : null]"
-    >
-        <custom-app ref="app">
-            <div
-                class="swan-app-container"
-                :class="[transitionStatus === 'enter' ? 'transition-status-enter' : null]"
-                :style="{
-                    paddingTop: hasNavigationBar ? '38px': null
-                }"
-            >
-                <navigation-bar
-                    :transitionDuration="transitionDuration"
-                    :transitionTimingFunc="transitionTimingFunc"
-                    :backgroundColor="currentNavigationBarBackgroundColor"
-                    :textStyle="currentNavigationBarTextStyle"
-                    :showBottomBorder="showNavigationBorder"
-                    :homeIconColor="navigationBarHomeColor"
-                    :title="currentTitle"
-                    :isHomePage="isHomePage"
-                    :navigationStyle="currentNavigationStyle"/>
+    <div>
+        <div
+            id="mars"
+            :class="[transitionStatus === 'enter' ? 'transition-status-enter' : null]"
+        >
+            <custom-app ref="app">
                 <div
-                    class="swan-app-tab-panel"
+                    class="swan-app-container"
                     :class="[transitionStatus === 'enter' ? 'transition-status-enter' : null]"
+                    :style="{
+                        paddingTop: hasNavigationBar ? '38px': null
+                    }"
                 >
-                    <pull-down-refresh
-                        ref="refresherHandler"
-                        @pull-down-refresh="handleRefresh"
-                        @reach-bottom="handleReachBottom"
-                        @page-scroll="handlePageScroll"
-                        :enablePullDownRefresh="enablePullDownRefresh"
-                        :enableReachBottom="enableReachBottom"
-                        :onReachBottomDistance="onReachBottomDistance"
-                        class="tab-panel-content"
-                        :style="{
-                            top: `${pos || 0}px`,
-                            height: bodyHeight,
-                            position: transitionStatus === 'enter' ? 'relative': 'static'
-                        }"
+                    <navigation-bar
+                        :transitionDuration="transitionDuration"
+                        :transitionTimingFunc="transitionTimingFunc"
+                        :backgroundColor="currentNavigationBarBackgroundColor"
+                        :textStyle="currentNavigationBarTextStyle"
+                        :showBottomBorder="showNavigationBorder"
+                        :homeIconColor="navigationBarHomeColor"
+                        :title="currentTitle"
+                        :isHomePage="isHomePage"
+                        :navigationStyle="currentNavigationStyle"/>
+                    <div
+                        class="swan-app-tab-panel"
+                        :class="[transitionStatus === 'enter' ? 'transition-status-enter' : null]"
                     >
-                        <transition 
-                            :name="useTransition && !tabChange && !browserAction ? 'fold-left' : 'back'"
-                            :mode="useTransition && !browserAction ? 'in-out' : null"
-                            @before-enter="beforeEnter"
-                            @after-enter="afterEnter"
-                            @enter="enter"
-                            @leave="leave"
-                            @before-leave="beforeLeave"
+                        <pull-down-refresh
+                            ref="refresherHandler"
+                            @pull-down-refresh="handleRefresh"
+                            @reach-bottom="handleReachBottom"
+                            @page-scroll="handlePageScroll"
+                            :enablePullDownRefresh="enablePullDownRefresh"
+                            :enableReachBottom="enableReachBottom"
+                            :onReachBottomDistance="onReachBottomDistance"
+                            class="tab-panel-content"
+                            :style="{
+                                top: `${pos || 0}px`,
+                                height: bodyHeight,
+                                position: transitionStatus === 'enter' ? 'relative': 'static'
+                            }"
                         >
-                            <keep-alive :max="6">
-                                <router-view
-                                    v-if="showRouterView"
-                                    :key="routerViewKey"
-                                    ref="currentRouter"
-                                    :style="{
-                                        paddingBottom: tabBarHeight + 'px',
-                                        backgroundColor: currentBackgroundColor || '#fff',
-                                        top: currentNavigationStyle === 'default' ? '38px': null
-                                    }"
-                                />
-                            </keep-alive>
-                        </transition>
-                    </pull-down-refresh>
+                            <transition 
+                                :name="useTransition && !tabChange && !browserAction ? 'fold-left' : 'back'"
+                                :mode="useTransition && !browserAction ? 'in-out' : null"
+                                @before-enter="beforeEnter"
+                                @after-enter="afterEnter"
+                                @enter="enter"
+                                @leave="leave"
+                                @before-leave="beforeLeave"
+                            >
+                                <keep-alive :max="6">
+                                    <router-view
+                                        v-if="showRouterView"
+                                        :key="routerViewKey"
+                                        ref="currentRouter"
+                                        :style="{
+                                            paddingBottom: tabBarHeight + 'px',
+                                            backgroundColor: currentBackgroundColor || '#fff',
+                                            top: currentNavigationStyle === 'default' ? '38px': null
+                                        }"
+                                    />
+                                </keep-alive>
+                            </transition>
+                        </pull-down-refresh>
+                    </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"
+                        />
                 </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"
-                    />
-            </div>
-        </custom-app>
+            </custom-app>
+        </div>
         <div id="mars-background" ref="marsBackground"></div>
     </div>
 </template>
@@ -315,7 +317,6 @@ export default {
         width: 100%;
 
         .swan-app-tab-panel {
-            overflow-y: auto;
             width: 100%;
 
             .tab-panel-content {