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

蓉妹妹

于 2025-05-22 09:19:40 发布

阅读量323

点赞数 4

文章标签： react.js taro 微信小程序

本文链接：https://blog.csdn.net/weixin_43517190/article/details/148129802

版权

话不多说直接上图
在这里插入图片描述

第一步

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;
}