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;
}
相关推荐
文心快码BaiduComate1 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
小lan猫3 小时前
React学习笔记(一)
前端·react.js
江城开朗的豌豆8 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学8 小时前
React框架详解:从入门到精通(详细版)
react.js·redux
江城开朗的豌豆8 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
艾小码9 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
bug_kada9 小时前
详解 React useCallback & useMemo
前端·react.js
用户784721509919 小时前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong1 天前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js