MMImageBackground 背景图

背景图组件。适配 app。如果你只是需要兼容小程序。或许直接使用 css 属性 backgroundImage 会更合适

Props

IMMImageBackgroundProps

属性	类型	默认值	必传	说明
url	string		是	图片地址
imageHeight	number		是	图片宽度
resizeMode	'cover' | 'contain' | 'repeat'		否	图片样式
style	Omit<CSSProperties, 'height'>		否	样式

代码示例

import { FC, memo, PropsWithChildren, useState } from "react";
import { View } from "@tarojs/components";
import MMPageContainer from "../../layout/mmPageContainer";
import MMImageBackground from "../../components/image-background";
import bg from "./images/bg.png";
import { useScrollNav } from "../../hooks/useScrollNav";

interface IOverlayProps {}

/**
 * Overlay 遮罩层
 *
 * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
 */
const Component: FC<PropsWithChildren<IOverlayProps>> = (props) => {
  const [visible, setVisible] = useState(false);
  const { percent, onScroll } = useScrollNav();
  return (
    <MMPageContainer
      navProps={{
        title: "背景图片",
        color: percent > 0.5 ? "#333333" : "#ffffff",
        backgroundColor: `rgba(255,255,255, ${percent})`,
      }}
      scrollViewProps={{
        onScroll,
      }}
    >
      <MMImageBackground url={bg} imageHeight={267} />

      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
      <View style={{ height: 100 }}>111</View>
    </MMPageContainer>
  );
};

const ImageBackgroundPage = memo(Component);
export default ImageBackgroundPage;