React+Taro 微信小程序做一个页面,背景图需贴手机屏幕最上边覆盖展示

话不多说 直接上图

第一步

bash 复制代码
import { getSystemInfoSync } from '@tarojs/taro';

第二步

bash 复制代码
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>;
  }

第三步样式

bash 复制代码
.member-merge{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #f5f5f5;
  background-size: 100% auto;
  background-position: top left;
  background-repeat: no-repeat;
}
相关推荐
博客zhu虎康4 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
小蒜学长5 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq5 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
wordbaby5 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
毕设源码-钟学长7 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue8 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
li357410 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
hj5914_前端新手10 小时前
React 基础 - 状态管理
前端·react.js
三脚猫的喵11 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
海绵宝宝不喜欢侬12 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app