> 文档中心 > Harmonyos 自定义下拉列表框(select)

Harmonyos 自定义下拉列表框(select)

自定义一个下拉列表框,当这个功能有效时,点击可弹出下拉框,选中某个选项后,在左边功能名称下面显示选项值,右边的箭头替换成自定义图标,例如手法功能;当功能无效时,置灰,如力度功能;

具体示例如下:

 代码如下:index.hml

手法{{manualIndex}}
{{$item.name}}
手法 {{manualIndex}} {{manualIndex}}

index.css

.manualMode-valid {    text-align: center;    align-items: center;    display: flex;    position: absolute;}.fun-grid-item {    height: 138px;    border-radius: 24px;    background-color: #ffffff;    text-align: center;    align-items: center;    width: 100%;}.grid-item-parent-vertical {    display: flex;    position: relative;    flex-direction: column;    align-items: center;    justify-content: center;}.fun-name {    font-family: HWtext-55ST;    margin-left: 32px;    font-size: 32px;    text-align: center;}.fun-status {    margin-left: 32px;    font-size: 24px;    color: #007DFF;    margin-top: 6px;    position: relative;    font-family: HWtext-55ST;}.offLine_status {    opacity: 0.38;}.onOffLine_status_label {    text-align: center;    margin-left: 32px;    font-size: 36px;    font-family: HWtext-65ST;    color: #000000;}.onOffLine_status {    display: flex;    justify-content: flex-end;    margin-right: 32px;}

毒蛇网