当前位置: 首页 > article >正文

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;
}
http://www.lryc.cn/news/2391969.html

相关文章:

  • Spring框架学习day4--Spring集成Mybatis(IOC)
  • 太阳系运行模拟程序-html动画
  • 【C++ Qt】容器类(GroupBox、TabWidget)内附思维导图 通俗易懂
  • SOC-ESP32S3部分:18-串口
  • CSS 样式表的四种应用方式及css注释的应用小结
  • 五、web安全--XSS漏洞(2)--XSS相关payload
  • AI架构师的新工具箱:ChatGPT、Copilot、AutoML、模型服务平台
  • 关于智能体接入后端,在Apifox能够传参数给智能体的测试
  • 有铜半孔工艺的制造难点与工艺优化
  • python分步合并处理excel数据
  • MC0309魔法项链
  • 为 Ubuntu 安装的软件创建桌面图标
  • uni-app 中开发问题汇总
  • https下git拉取gitlab仓库源码
  • 距离计算范围查找距离排序
  • PS linux 基础篇1-AXI_DMA
  • AI大模型学习三十、ubuntu安装comfyui,安装插件,修改返回405 bug,值得一看喔
  • 11高可用与容错
  • 百度之星2024 初赛第一场 补给
  • Collection集合遍历的三种方法
  • Taro on Harmony C-API 版本正式开源
  • 知识隔离的视觉-语言-动作模型:训练更快、运行更快、泛化更好
  • [ARM][架构] 02.AArch32 程序状态
  • Dockerfile正确写法之现代容器化构建的最佳实践
  • React---day4
  • ArkUI(方舟UI框架)介绍
  • 【Bug】定时任务中 Jpa Save 方法失效
  • 英语科研词汇现象及语言演变探讨
  • C# 打印PDF的常用方法
  • 若依微服务的定制化服务