Ken428965 2022-09-06 15:52 采纳率: 53.4%
浏览 123
已结题

ant design mobile V5.22里的轮播图组件引入后调整不了轮播图的高度?

轮播图js文件代码如下:

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.css';
const colors = ['red', 'yellow', 'blue', 'green'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay>
            {items}
          </Swiper>
        </Space>
    );
};

轮播图样式文件代码如下:

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.css';
const colors = ['red', 'yellow', 'blue', 'green'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay>
            {items}
          </Swiper>
        </Space>
    );
};

样式文件里轮播图高度为120px,但浏览器界面显示如下:

img

请问调整不了轮播图高度的原因是什么?如何解决?

展开全部

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-09-07 01:45
    关注

    你审查元素看看加上了没有 怀疑没加上

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    Ken428965 2022-09-07 05:26

    在样式文件里看到是加上了的

    回复
    Ken428965 2022-09-07 05:27

    
    .content {
        height: 120px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        user-select: none;
        background-image: url(../Homepage/1.JPG);
      }
    
      .customIndicator {
        position: absolute;
        top: 6px;
        right: 6px;
        background: rgba(0, 0, 0, 0.3);
        padding: 4px 8px;
        color: #ffffff;
        border-radius: 4px;
        user-select: none;
      }
    

    回复
    崽崽的谷雨 回复 Ken428965 2022-09-07 05:29

    审查 一下 元素看看加上了没

    1
    回复
    展开全部28条评论
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 9月14日
  • 已采纳回答 9月7日
  • 创建了问题 9月6日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部