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;
}
相关推荐
2301_80596293几秒前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 分钟前
微信小程序121~130
微信小程序·小程序
難釋懷5 分钟前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~7 分钟前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君0117 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
goldenocean3 小时前
React之旅-05 List Key
前端·javascript·react.js
杨进军5 小时前
React 实现节点删除
前端·react.js·前端框架
爱编程的喵6 小时前
React useContext 深度解析:告别组件间通信的噩梦
前端·react.js
默魔6 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app