彻底解决页面抖动问题

src/App.vue

@@ -1,7 +1,24 @@
 <script>
 export default {
+    globalData: {
+        pageConfig: {},
+    },
     onLaunch: function () {
-        this.$store.dispatch("system/initConfig");
+        let pageConfig = uni.getStorageSync("system_config");
+        if (!pageConfig) {
+            const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
+            // #ifndef H5
+            const { height, top } = uni.getMenuButtonBoundingClientRect();
+            const headerHeight = height + (top - statusBarHeight) * 2;
+            // #endif
+            // #ifdef H5
+            const headerHeight = 40; // 乘2再使用rpx2px转px使用
+            // #endif
+            pageConfig = { windowWidth, windowHeight, statusBarHeight, headerHeight, safeAreaInsets };
+            uni.setStorageSync("system_config", pageConfig);
+        }
+        this.globalData.pageConfig = pageConfig;
+        // 初始化用户
         this.$models.user.initUser();
     },
     onShow: function () {},

src/components/cate/cate.vue

@@ -46,7 +46,6 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
 import CateTmpl from "@/components/cate/template/cate";
 import ListTmpl from "@/components/cate/template/list";
 export default {
@@ -90,15 +89,10 @@ export default {
         CateTmpl,
         ListTmpl,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     created() {},
     mounted() {
         this.getMenuItemTop();
-        const { windowHeight, statusBarHeight, headerHeight } = this.config;
+        const { windowHeight, statusBarHeight, headerHeight } = getApp().globalData.pageConfig;
         // 计算页面内边距------------------------------------------
         // #ifndef H5
         const bodyPt = statusBarHeight + headerHeight;

src/components/layout/layout.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="page-layout" :style="{ backgroundColor: backgroundColor, minHeight: minHeight, opacity: isReady ? 1 : 0 }">
+    <view class="page-layout" :style="{ backgroundColor: backgroundColor, minHeight: minHeight }">
         <view
             v-if="showHeader"
             class="page-header"
@@ -41,7 +41,6 @@ export default {
     name: "component-layout",
     data() {
         return {
-            isReady: false,
             headerHeight: 0,
             statusBarHeight: 0,
             bodyPaddingTop: 0,
@@ -86,7 +85,6 @@ export default {
     },
     computed: {
         ...mapState({
-            config: (state) => state.system.config,
             isLogin: (state) => state.user.token.length > 0,
         }),
     },
@@ -94,7 +92,7 @@ export default {
         if (this.isLogin) {
             this.$store.dispatch("user/info");
         }
-        const { statusBarHeight, headerHeight } = this.config;
+        const { statusBarHeight, headerHeight } = getApp().globalData.pageConfig;
         // #ifndef H5
         this.statusBarHeight = statusBarHeight;
         this.headerHeight = headerHeight;
@@ -108,7 +106,6 @@ export default {
         if (this.showHeader) {
             this.bodyPaddingTop = safePaddingTop;
         }
-        this.isReady = true;
     },
     mounted() {},
     methods: {
@@ -132,7 +129,7 @@ export default {
     max-width: 750px;
     width: 100%;
     margin: 0 auto;
-    transition: all .5s;
+    transition: all 0.5s;
     /* #ifdef H5 */
     // 修复自定义tabBar后的遮挡问题
     // padding-bottom: calc(@tabBarHeight - 50px);

src/pages/address/address.vue

@@ -25,7 +25,7 @@
                 </view>
             </view>
         </view>
-        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <view class="btn get-wechat-address" @click="getWechatAddress">
                 <text class="text">获取微信收货地址</text>
             </view>
@@ -39,7 +39,6 @@
 <script>
 import AppLayout from "@/components/layout/layout";
 import WidgetCheckBox from "@/components/widgets/checkbox";
-import { mapState } from "vuex";
 export default {
     name: "member-address",
     data() {
@@ -47,45 +46,18 @@ export default {
             utils: this.$utils,
             pageTitle: "我的地址",
             openType: "list",
+            pageConfig: {},
             chooseAddressId: 0,
-            list: [
+            list: [],
-                // {
-                //     id: 1,
-                //     isDefault: false,
-                //     address: "四川省绵阳市高新区",
-                //     detail: "火炬东街110号",
-                //     name: "李（先生）",
-                //     mobile: "18200000001",
-                // },
-                // {
-                //     id: 2,
-                //     isDefault: false,
-                //     address: "四川省绵阳市高新区",
-                //     detail: "火炬东街110号",
-                //     name: "李（先生）",
-                //     mobile: "18200000001",
-                // },
-                // {
-                //     id: 3,
-                //     isDefault: true,
-                //     address: "四川省绵阳市高新区",
-                //     detail: "火炬东街110号",
-                //     name: "李（先生）",
-                //     mobile: "18200000001",
-                // },
-            ],
         };
     },
     components: {
         AppLayout,
         WidgetCheckBox,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     onLoad(e) {
+        this.pageConfig = getApp().globalData.pageConfig;
+
         if (e.openType) {
             this.openType = e.openType;
             if (e.openType == "choose") {

src/pages/demand/demand.vue

@@ -154,7 +154,7 @@
                         <service-insurance padding="38rpx 30rpx" :insurance="insurance" @change="changeInsuranceState" />
                     </view>
                 </view>
-                <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+                <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
                     <text class="price">¥ {{ utils.formatNumber(total, 2) }}</text>
                     <view v-if="type == 1" class="btn" @click="submit">
                         <div class="text">立即发布</div>
@@ -193,13 +193,13 @@ import AppLayout from "@/components/layout/layout";
 import WidgetTips from "@/components/widgets/tips";
 import WidgetModal from "@/components/widgets/modal";
 import ServiceInsurance from "@/components/service/insurance";
-import { mapState } from "vuex";
 export default {
     name: "demand",
     data() {
         return {
             utils: this.$utils,
             customBtn: false,
+            pageConfig: {},
             pageTitle: "发布需求",
             maxlength: 300,
             step: 1,
@@ -235,12 +235,9 @@ export default {
         ServiceInsurance,
         WidgetModal,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     onLoad() {
+        this.pageConfig = getApp().globalData.pageConfig;
+
         // #ifdef MP-WEIXIN
         uni.enableAlertBeforeUnload({
             message: "需求尚未发布，此时离开不会保留任何数据，确定离开？",

src/pages/order/create.vue

@@ -43,7 +43,7 @@
                 <agreement v-model="isAgree" />
             </view>
         </view>
-        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <text class="price">¥306.00</text>
             <view class="pay" @click="pay">
                 <div class="text">去支付</div>
@@ -58,11 +58,11 @@ import ServicePreviewItem from "@/components/service/preview-item";
 import Agreement from "@/components/auth/agreement";
 import WidgetTips from "@/components/widgets/tips";
 import ServiceInsurance from "@/components/service/insurance";
-import { mapState } from "vuex";
 export default {
     name: "order-create",
     data() {
         return {
+            pageConfig: {},
             addressId: 0,
             addressText: "",
             datetime: "",
@@ -92,12 +92,9 @@ export default {
         WidgetTips,
         ServiceInsurance,
     },
-    computed: {
+    onLoad() {
-        ...mapState({
+        this.pageConfig = getApp().globalData.pageConfig;
-            config: (state) => state.system.config,
-        }),
     },
-    onLoad() {},
     onShow() {},
     onReady() {},
     onReachBottom() {},

src/pages/order/detail.vue

@@ -107,7 +107,7 @@
                 </swiper-item>
             </swiper>
         </view>
-        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <view class="service" @click="utils.serviceActions()">
                 <text class="iconfont icon-kefu"></text>
                 <text class="text">客服</text>
@@ -124,12 +124,12 @@ import AppLayout from "@/components/layout/layout";
 import WorkerItem from "@/components/worker/item";
 import ServiceInsurance from "@/components/service/insurance";
 import OrderAction from "@/components/order/action";
-import { mapState } from "vuex";
 export default {
     name: "order-detail",
     data() {
         return {
             utils: this.$utils,
+            pageConfig: {},
             tabIndex: 0,
             tabHeight: 0,
             order: {
@@ -206,12 +206,9 @@ export default {
         ServiceInsurance,
         OrderAction,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     onLoad(e) {
+        this.pageConfig = getApp().globalData.pageConfig;
+
         if (e.type && e.type == "detail") {
             this.switchTab(1);
         } else {

src/pages/service/cate.vue

@@ -44,14 +44,11 @@ export default {
         AppCate,
         WidgetSearch,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     async onLoad() {
-        let x = this.config.windowWidth - this.$utils.rpx2px(94);
+        let pageConfig = getApp().globalData.pageConfig;
-        let y = this.config.windowHeight - this.$utils.rpx2px(94);
+
+        let x = pageConfig.windowWidth - this.$utils.rpx2px(94);
+        let y = pageConfig.windowHeight - this.$utils.rpx2px(94);
         // H5平台减去tabBar高度
         // #ifdef H5
         y = y - this.$utils.rpx2px(100);

src/pages/service/detail.vue

@@ -61,7 +61,7 @@
                     </view>
                 </swiper-item>
             </swiper>
-            <view class="common-bottom-components" v-if="tabIndex == 0" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+            <view class="common-bottom-components" v-if="tabIndex == 0" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
                 <view class="price">
                     <text class="text">¥{{ detail.price }}</text>
                 </view>
@@ -80,11 +80,11 @@
 
 <script>
 import AppLayout from "@/components/layout/layout";
-import { mapState } from "vuex";
 export default {
     name: "service-detail",
     data() {
         return {
+            pageConfig: {},
             tabIndex: 0, // 1评价
             tabHeight: 0,
             currentBanner: 1,
@@ -103,12 +103,9 @@ export default {
     components: {
         AppLayout,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     onLoad(e) {
+        this.pageConfig = getApp().globalData.pageConfig;
+
         if (e.id) {
             this.id = e.id;
         } else {

src/pages/service/list.vue

@@ -3,7 +3,7 @@
         <view class="cate">
             <app-cate :offsetHeight="0" :data="data" cateType="list" @clickItem="clickItem" :activeId="currentId" />
         </view>
-        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <view class="cart" @click="utils.toPage('/pages/service/cart')">
                 <view class="cart-icon">
                     <text class="iconfont icon-gouwuche"></text>
@@ -22,12 +22,12 @@
 <script>
 import AppLayout from "@/components/layout/layout";
 import AppCate from "@/components/cate/cate";
-import { mapState } from "vuex";
 export default {
     name: "service-list",
     data() {
         return {
             utils: this.$utils,
+            pageConfig: {},
             data: [],
             bottom: 0,
 
@@ -38,12 +38,9 @@ export default {
         AppLayout,
         AppCate,
     },
-    computed: {
-        ...mapState({
-            config: (state) => state.system.config,
-        }),
-    },
     onLoad(e) {
+        this.pageConfig = getApp().globalData.pageConfig;
+
         if (!e.id) {
             this.$utils.toast("参数错误");
             return;

src/pages/service/other/distribution.vue

@@ -74,7 +74,7 @@
                 </view>
             </view>
         </view>
-        <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
+        <view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
             <text class="price">¥ {{ utils.formatNumber(total) }}</text>
             <view class="btn" @click="pay">
                 <div class="text">立即支付</div>
@@ -85,12 +85,12 @@
 
 <script>
 import AppLayout from "@/components/layout/layout";
-import { mapState } from "vuex";
 export default {
     name: "service-other-distribution",
     data() {
         return {
             utils: this.$utils,
+            pageConfig: {},
             carTypeList: [
                 {
                     id: 1,
@@ -118,12 +118,9 @@ export default {
     components: {
         AppLayout,
     },
-    computed: {
+    onLoad() {
-        ...mapState({
+        this.pageConfig = getApp().globalData.pageConfig;
-            config: (state) => state.system.config,
-        }),
     },
-    onLoad() {},
     onShow() {},
     onReady() {},
     onReachBottom() {},

src/store/index.js

@@ -2,12 +2,10 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import user from "@/store/modules/user"
-import system from "@/store/modules/system"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
     modules: {
         user,
-        system,
     }
 })

src/store/modules/system.js

@@ -1,34 +0,0 @@
-export default {
-    namespaced: true,
-    state: {
-        config: {},
-    },
-    getters: {
-        config(state) {
-            return state.config;
-        },
-    },
-    mutations: {
-        setConfig(state, data) {
-            state.config = { ...state.config, ...data };
-        },
-    },
-    actions: {
-        initConfig(context) {
-            let config = uni.getStorageSync('system_config');
-            if (!config) {
-                const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
-                // #ifndef H5
-                const { height, top } = uni.getMenuButtonBoundingClientRect();
-                const headerHeight = height + ((top - statusBarHeight) * 2);
-                // #endif
-                // #ifdef H5
-                const headerHeight = 40; // 乘2再使用rpx2px转px使用
-                // #endif
-                config = { windowWidth, windowHeight, statusBarHeight, headerHeight, safeAreaInsets };
-                uni.setStorageSync('system_config', config);
-            }
-            context.commit('setConfig', config);
-        }
-    }
-}