Ant Design Mobile的List点击后如何保持选中高亮？

UI秀兰提问于 2026-02-18 13:50:26 阅读 52

移动

在用Ant Design Mobile做订单列表时，点击List项后高亮会立刻消失，怎么才能让选中的项持续显示蓝色背景呢？

我尝试过给ListItem加selected属性：


<List>
  <List.Item 
    selected={this.state.selected === 'order1'} 
    onClick={() => this.setState({selected: 'order1'})}
  >
    订单1
  </List.Item>
</List>

但点击后高亮只闪一下就没了，是不是需要配合其他样式？或者我的状态更新方式有问题？

我来解答赞 5 收藏

反馈

1 条解答

恩希 Lv1

这个问题的关键在于 Ant Design Mobile 的 List.Item 高亮状态是通过样式控制的，而不是单纯靠 selected 属性。你现在的写法只是设置了属性，但没有真正影响到样式。

解决方法其实挺简单，用一个状态变量来记录当前选中的项，然后通过 className 动态添加样式。具体代码可以这么写：

import React, { useState } from 'react';

import { List } from 'antd-mobile';

import './custom.css'; // 自定义样式



const OrderList = () => {

  const [selected, setSelected] = useState(null);



  return (

    <List>

      {[1, 2, 3].map((item) => (

        <List.Item

          key={item}

          className={selected === item ? 'active-item' : ''}

          onClick={() => setSelected(item)}

        >

          订单{item}

        </List.Item>

      ))}

    </List>

  );

};



export default OrderList;

然后在 custom.css 里定义高亮样式：

.active-item {

  background-color: #e6f7ff; /* 蓝色背景 */

  color: #1890ff; /* 字体颜色 */

}

这里用了 React 的 hooks 来管理状态，比类组件更简洁。重点是通过 className 来控制样式，因为 Ant Design Mobile 的组件库本身并没有提供持久高亮的功能。

说实话，这种需求挺常见的，组件库不提供现成方案就得自己动手。记得把样式文件引入到项目里，不然样式是不会生效的。我以前也被这个坑过，调试了半天才发现忘记引样式文件了，真是醉了。

2026-02-18 14:00