Skip to content

U
uni-app

味无味_ / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 3dec14ed 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

fix(h5): maxWidth

上级 9aa705c9
展开全部 隐藏空白更改
内联 并排
Showing with 125 addition and 24 deletion
packages/uni-app-plus/dist/uni.runtime.esm.js
浏览文件 @ 3dec14ed
......@@ -9240,6 +9240,7 @@ let deviceWidth = 0;
let deviceDPR = 0;
let maxWidth = 960;
let baseWidth = 375;
let includeWidth = 750;
function checkDeviceWidth() {
const { platform, pixelRatio, windowWidth } = getBaseSystemInfo();
deviceWidth = windowWidth;
......@@ -9252,9 +9253,9 @@ function checkValue(value, defaultValue) {
}
function checkMaxWidth() {
const config = __uniConfig.globalStyle || {};
// ignore rpxCalcIncludeWidth
maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960);
baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375);
includeWidth = checkValue(config.rpxCalcBaseDeviceWidth, 750);
}
const upx2px = defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
if (deviceWidth === 0) {
......@@ -9269,7 +9270,7 @@ const upx2px = defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
}
let width = newDeviceWidth || deviceWidth;
{
width = width <= maxWidth ? width : baseWidth;
width = number === includeWidth || width <= maxWidth ? width : baseWidth;
}
let result = (number / BASE_DEVICE_WIDTH) * width;
if (result < 0) {
......@@ -13249,6 +13250,7 @@ function useTabBarThemeChange(tabBar, options) {
list: list.map((item) => ({
iconPath: item.iconPath,
selectedIconPath: item.selectedIconPath,
visible: item.visible,
})),
});
};
......
packages/uni-h5/dist/uni-h5.cjs.js
浏览文件 @ 3dec14ed
......@@ -447,6 +447,14 @@ function getRealRoute(fromRoute, toRoute) {
fromRouteArray.splice(fromRouteArray.length - i - 1, i + 1);
return uniShared.addLeadingSlash(fromRouteArray.concat(toRouteArray).join("/"));
}
function getRouteOptions(path, alias = false) {
if (alias) {
return __uniRoutes.find(
(route) => route.path === path || route.alias === path
);
}
return __uniRoutes.find((route) => route.path === path);
}
function findUniTarget(target) {
while (target && target.tagName.indexOf("UNI-") !== 0) {
target = target.parentElement;
......@@ -11432,7 +11440,18 @@ function useMaxWidth(layoutState, rootRef) {
const route = usePageRoute();
function checkMaxWidth() {
const windowWidth = document.body.clientWidth;
const maxWidth = parseInt(String(__uniConfig.globalStyle.maxWidth || Number.MAX_SAFE_INTEGER));
const pages = getCurrentPages();
let meta = {};
if (pages.length > 0) {
const curPage = pages[pages.length - 1];
meta = curPage.$page.meta;
} else {
const routeOptions = getRouteOptions(route.path, true);
if (routeOptions) {
meta = routeOptions.meta;
}
}
const maxWidth = parseInt(String((shared.hasOwn(meta, "maxWidth") ? meta.maxWidth : __uniConfig.globalStyle.maxWidth) || Number.MAX_SAFE_INTEGER));
let showMaxWidth = false;
if (windowWidth > maxWidth) {
showMaxWidth = true;
......@@ -11463,11 +11482,23 @@ function useState() {
const route = usePageRoute();
if (!__UNI_FEATURE_RESPONSIVE__) {
const layoutState2 = vue.reactive({
marginWidth: 0
marginWidth: 0,
leftWindowWidth: 0,
rightWindowWidth: 0
});
vue.watch(() => layoutState2.marginWidth, (value) => updateCssVar({
"--window-margin": value + "px"
}));
vue.watch(() => layoutState2.leftWindowWidth + layoutState2.marginWidth, (value) => {
updateCssVar({
"--window-left": value + "px"
});
});
vue.watch(() => layoutState2.rightWindowWidth + layoutState2.marginWidth, (value) => {
updateCssVar({
"--window-right": value + "px"
});
});
return {
layoutState: layoutState2,
windowState: vue.computed(() => ({}))
......@@ -11514,12 +11545,16 @@ function useState() {
vue.watch(() => layoutState.marginWidth, (value) => updateCssVar({
"--window-margin": value + "px"
}));
vue.watch(() => layoutState.leftWindowWidth + layoutState.marginWidth, (value) => updateCssVar({
"--window-left": value + "px"
}));
vue.watch(() => layoutState.rightWindowWidth + layoutState.marginWidth, (value) => updateCssVar({
"--window-right": value + "px"
}));
vue.watch(() => layoutState.leftWindowWidth + layoutState.marginWidth, (value) => {
updateCssVar({
"--window-left": value + "px"
});
});
vue.watch(() => layoutState.rightWindowWidth + layoutState.marginWidth, (value) => {
updateCssVar({
"--window-right": value + "px"
});
});
UniServiceJSBridge.on(uniShared.ON_NAVIGATION_BAR_CHANGE, (navigationBar) => {
layoutState.navigationBarTitleText = navigationBar.titleText;
});
......
packages/uni-h5/dist/uni-h5.es.js
浏览文件 @ 3dec14ed
......@@ -3192,6 +3192,7 @@ let deviceWidth = 0;
let deviceDPR = 0;
let maxWidth = 960;
let baseWidth = 375;
let includeWidth = 750;
function checkDeviceWidth() {
const { platform, pixelRatio: pixelRatio2, windowWidth } = getBaseSystemInfo();
deviceWidth = windowWidth;
......@@ -3206,6 +3207,7 @@ function checkMaxWidth() {
const config = __uniConfig.globalStyle || {};
maxWidth = checkValue(config.rpxCalcMaxDeviceWidth, 960);
baseWidth = checkValue(config.rpxCalcBaseDeviceWidth, 375);
includeWidth = checkValue(config.rpxCalcBaseDeviceWidth, 750);
}
const upx2px = /* @__PURE__ */ defineSyncApi(
API_UPX2PX,
......@@ -3222,7 +3224,7 @@ const upx2px = /* @__PURE__ */ defineSyncApi(
}
let width = newDeviceWidth || deviceWidth;
{
width = width <= maxWidth ? width : baseWidth;
width = number === includeWidth || width <= maxWidth ? width : baseWidth;
}
let result = number / BASE_DEVICE_WIDTH * width;
if (result < 0) {
......@@ -21870,7 +21872,18 @@ function useMaxWidth(layoutState, rootRef) {
const route = usePageRoute();
function checkMaxWidth2() {
const windowWidth = document.body.clientWidth;
const maxWidth2 = parseInt(String(__uniConfig.globalStyle.maxWidth || Number.MAX_SAFE_INTEGER));
const pages = getCurrentPages();
let meta = {};
if (pages.length > 0) {
const curPage = pages[pages.length - 1];
meta = curPage.$page.meta;
} else {
const routeOptions = getRouteOptions(route.path, true);
if (routeOptions) {
meta = routeOptions.meta;
}
}
const maxWidth2 = parseInt(String((hasOwn(meta, "maxWidth") ? meta.maxWidth : __uniConfig.globalStyle.maxWidth) || Number.MAX_SAFE_INTEGER));
let showMaxWidth = false;
if (windowWidth > maxWidth2) {
showMaxWidth = true;
......@@ -21905,11 +21918,23 @@ function useState() {
const route = usePageRoute();
if (!__UNI_FEATURE_RESPONSIVE__) {
const layoutState2 = reactive({
marginWidth: 0
marginWidth: 0,
leftWindowWidth: 0,
rightWindowWidth: 0
});
watch(() => layoutState2.marginWidth, (value) => updateCssVar({
"--window-margin": value + "px"
}));
watch(() => layoutState2.leftWindowWidth + layoutState2.marginWidth, (value) => {
updateCssVar({
"--window-left": value + "px"
});
});
watch(() => layoutState2.rightWindowWidth + layoutState2.marginWidth, (value) => {
updateCssVar({
"--window-right": value + "px"
});
});
return {
layoutState: layoutState2,
windowState: computed(() => ({}))
......@@ -21960,12 +21985,16 @@ function useState() {
watch(() => layoutState.marginWidth, (value) => updateCssVar({
"--window-margin": value + "px"
}));
watch(() => layoutState.leftWindowWidth + layoutState.marginWidth, (value) => updateCssVar({
"--window-left": value + "px"
}));
watch(() => layoutState.rightWindowWidth + layoutState.marginWidth, (value) => updateCssVar({
"--window-right": value + "px"
}));
watch(() => layoutState.leftWindowWidth + layoutState.marginWidth, (value) => {
updateCssVar({
"--window-left": value + "px"
});
});
watch(() => layoutState.rightWindowWidth + layoutState.marginWidth, (value) => {
updateCssVar({
"--window-right": value + "px"
});
});
UniServiceJSBridge.on(ON_NAVIGATION_BAR_CHANGE, (navigationBar) => {
layoutState.navigationBarTitleText = navigationBar.titleText;
});
......
packages/uni-h5/src/framework/components/layout/index.tsx
浏览文件 @ 3dec14ed
......@@ -21,7 +21,7 @@ import {
import { RouterView } from 'vue-router'
import { defineSystemComponent } from '@dcloudio/uni-components'
import { updateCssVar } from '@dcloudio/uni-core'
import { getRouteOptions, updateCssVar } from '@dcloudio/uni-core'
import { useTabBar } from '../../setup/state'
import { useKeepAliveRoute } from '../../setup/page'
import {
......@@ -152,8 +152,25 @@ function useMaxWidth(
const route = usePageRoute()
function checkMaxWidth() {
const windowWidth = document.body.clientWidth
const pages = getCurrentPages()
let meta = {} as UniApp.PageRouteMeta
if (pages.length > 0) {
const curPage = pages[pages.length - 1]
meta = curPage.$page.meta
} else {
const routeOptions = getRouteOptions(route.path, true)
if (routeOptions) {
meta = routeOptions.meta
}
}
const maxWidth = parseInt(
String(__uniConfig.globalStyle.maxWidth || Number.MAX_SAFE_INTEGER)
String(
(hasOwn(meta, 'maxWidth')
? meta.maxWidth
: __uniConfig.globalStyle.maxWidth) || Number.MAX_SAFE_INTEGER
)
)
let showMaxWidth = false
if (windowWidth > maxWidth) {
......@@ -195,11 +212,25 @@ function useState() {
// max width
const layoutState = reactive({
marginWidth: 0,
leftWindowWidth: 0,
rightWindowWidth: 0,
}) as LayoutState
watch(
() => layoutState.marginWidth,
(value) => updateCssVar({ '--window-margin': value + 'px' })
)
watch(
() => layoutState.leftWindowWidth + layoutState.marginWidth,
(value) => {
updateCssVar({ '--window-left': value + 'px' })
}
)
watch(
() => layoutState.rightWindowWidth + layoutState.marginWidth,
(value) => {
updateCssVar({ '--window-right': value + 'px' })
}
)
return {
layoutState,
windowState: computed<WindowState>(() => ({})),
......@@ -276,11 +307,15 @@ function useState() {
)
watch(
() => layoutState.leftWindowWidth + layoutState.marginWidth,
(value) => updateCssVar({ '--window-left': value + 'px' })
(value) => {
updateCssVar({ '--window-left': value + 'px' })
}
)
watch(
() => layoutState.rightWindowWidth + layoutState.marginWidth,
(value) => updateCssVar({ '--window-right': value + 'px' })
(value) => {
updateCssVar({ '--window-right': value + 'px' })
}
)
UniServiceJSBridge.on(ON_NAVIGATION_BAR_CHANGE, (navigationBar) => {
layoutState.navigationBarTitleText = navigationBar.titleText
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或