topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

彻底解决页面抖动问题

This commit is contained in:
TOP糯米 2023-03-08 18:13:12 +08:00
parent 0bcb6e3311
commit 9c84bb512e
13 changed files with 55 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@ -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 () {},

8
src/components/cate/cate.vue
View File

@ -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;

9
src/components/layout/layout.vue
View File

@ -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);

38
src/pages/address/address.vue
View File

@ -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: [
// {
// 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",
// },
],
list: [],
};
},
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") {

11
src/pages/demand/demand.vue
View File

@ -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: "需求尚未发布，此时离开不会保留任何数据，确定离开？",

11
src/pages/order/create.vue
View File

@ -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: {
...mapState({
config: (state) => state.system.config,
}),
onLoad() {
this.pageConfig = getApp().globalData.pageConfig;
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},

11
src/pages/order/detail.vue
View File

@ -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 {

11
src/pages/service/cate.vue
View File

@ -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 y = this.config.windowHeight - this.$utils.rpx2px(94);
let pageConfig = getApp().globalData.pageConfig;
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);

11
src/pages/service/detail.vue
View File

@ -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 {

11
src/pages/service/list.vue
View File

@ -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;

11
src/pages/service/other/distribution.vue
View File

@ -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: {
...mapState({
config: (state) => state.system.config,
}),
onLoad() {
this.pageConfig = getApp().globalData.pageConfig;
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},

2
src/store/index.js
View File

@ -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,
}
})

34
src/store/modules/system.js
View File

@ -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);
}
}
}