antd-mobile中List的使用

最新推荐文章于 2025-05-16 13:35:26 发布

追逐春天的大孩子

最新推荐文章于 2025-05-16 13:35:26 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： List

本文链接：https://blog.youkuaiyun.com/weixin_43709908/article/details/108646330

react 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了在antd-mobile中如何使用List组件，并展示了修改后适应项目需求的效果。内容包括List的代码实现及配套的.less样式文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为为了适应自己项目的需要进行了相应的修改
效果图是这样的
在这里插入图片描述代码

import { List } from "antd-mobile"; //导入
<List>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                        <List.Item>
                        <span className="required-mark">*</span>
                                问题名称:
                                <input
                                    placeholder="请输入问题名称"
                                    type="text"
                                />
                        </List.Item>
                    </List>

.less样式文件

 .am-list{
            margin-bottom: 0.22rem;
            .am-list-body{
                display: flow-root;
            }
        }
        .am-list-item{
            padding-left: 0rem;
            padding-right: 0.25rem;
            min-height: 1.33rem;
            overflow: visible;
            .am-list-line{
                overflow: visible;
                &:after{
                    margin-left: 0.56rem;
                }
            }
            .am-list-content{
                padding-left: 0.53rem;
                font-size: 0.42rem;
                font-weight: bold;
                & .item-label, & img, &>input{
                    float: right;
                    font-weight: normal;
                    margin-left: 0.42rem;
                }
                &>.item-picker{
                    display: inline;
                    &>div{
                        display: inline;
                    }
                }
                .active{
                    color: #01AC92;
                }
                .dis-active{
                    color: black;
                }
                &>input{
                    text-align: end;
                    border: none;
                    margin-left: 0;
                    line-height: 1.5;
                }
                &>span:last-child{
                    font-size: 0.44rem;
                    font-weight: normal;
                }
                & img{
                    margin-left: 0.56rem;
                    width: .26rem;
                    height: .17rem;
                    margin-top: .23rem;
                }
                .required-mark{
                    color: red;
                    position: absolute;
                    left: 0.25rem;
                    top: 0.47rem;
                }
                .text-area-feedback{
                    border: none;
                }
                .text-area-workplan, .text-area-feedback{
                    &>textarea{
                        width: 100%;
                        border: none;
                        resize: none;
                    }
                }
            }
        }