React+Taro 微信小程序做一个页面,背景图需贴手机屏幕最上边覆盖展示
话不多说 直接上图
第一步
import { getSystemInfoSync } from '@tarojs/taro';
第二步
render() {const cardBanner = getImageUrlByGlobal('member-merge-bg.png');const { safeArea, statusBarHeight } = getSystemInfoSync();const NAV_BAR_HEIGHT = 44;const navBarHeight = NAV_BAR_HEIGHT + (statusBarHeight || safeArea.top);const containerStyle = {paddingTop: navBarHeight,backgroundImage: `url(${cardBanner})`};return <View className={prefix} style={containerStyle}></View>;}
第三步样式
.member-merge{display: flex;flex: 1;flex-direction: column;background-color: #f5f5f5;background-size: 100% auto;background-position: top left;background-repeat: no-repeat;
}