提交 de7fc194 编写于 作者: fxy060608's avatar fxy060608

feat(v3): css var(--window-top,--window-bottom,--status-bar-height)

上级 31f0cbdc
......@@ -227,12 +227,16 @@ var VAR_STATUS_BAR_HEIGHT = /var\(--status-bar-height\)/gi
var VAR_WINDOW_TOP = /var\(--window-top\)/gi
var VAR_WINDOW_BOTTOM = /var\(--window-bottom\)/gi
var statusBarHeight = false
function processCss(css) {
if (!uni.canIUse('css.var')) { //不支持 css 变量
if (statusBarHeight === false) {
statusBarHeight = plus.navigator.getStatusbarHeight()
}
var offset = {
statusBarHeight: plus.navigator.getStatusbarHeight(),
top:0,
bottom:0
statusBarHeight: statusBarHeight,
top: window.__WINDOW_TOP || 0,
bottom: window.__WINDOW_BOTTOM || 0
}
css = css.replace(VAR_STATUS_BAR_HEIGHT, offset.statusBarHeight + 'px')
.replace(VAR_WINDOW_TOP, offset.top + 'px')
......
......@@ -37,7 +37,9 @@ function parsePageCreateOptions (vm, route) {
disableScroll,
onPageScroll,
onPageReachBottom,
onReachBottomDistance
onReachBottomDistance,
windowTop: 0, // TODO
windowBottom: 0 // TODO
}
}
......
......@@ -19,12 +19,37 @@ const passiveOptions = supportsPassive ? {
passive: false
} : false
function onCssVar ({
windowTop,
windowBottom
}) {
global.__WINDOW_TOP = windowTop
global.__WINDOW_BOTTOM = windowBottom
if (uni.canIUse('css.var')) {
const style = document.documentElement.style
style.setProperty('--window-top', windowTop + 'px')
style.setProperty('--window-bottom', windowBottom + 'px')
style.setProperty('--status-bar-height', plus.navigator.getStatusbarHeight() + 'px')
if (process.env.NODE_ENV !== 'production') {
console.log(`--window-top=${windowTop}`)
console.log(`--window-bottom=${windowBottom}`)
}
}
}
function onPageCreate ({
windowTop,
windowBottom,
disableScroll,
onPageScroll,
onPageReachBottom,
onReachBottomDistance
}, pageId) {
onCssVar({
windowTop,
windowBottom
})
if (disableScroll) {
document.addEventListener('touchmove', disableScrollListener, passiveOptions)
} else if (onPageScroll || onPageReachBottom) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册