Question

我正在尝试创建一些简单的出生日期下拉菜单，并希望在下拉列表中显示滚动条，并显示固定数量的项目。我怎么能用react-bootstrap做到这一点？我目前的下拉列表离开了屏幕并在整个页面上触发了滚动条。

这是我的代码：

void getUsageStatistics() {

UsageEvents.Event currentEvent;
List<UsageEvents.Event> allEvents = new ArrayList<>();
HashMap<String, AppUsageInfo> map = new HashMap <String, AppUsageInfo> ();

long currTime = System.currentTimeMillis();
long startTime currTime - 1000*3600*3; //querying past three hours

UsageStatsManager mUsageStatsManager =  (UsageStatsManager)
                    mContext.getSystemService(Context.USAGE_STATS_SERVICE);

        assert mUsageStatsManager != null;
UsageEvents usageEvents = mUsageStatsManager.queryEvents(usageQueryTodayBeginTime, currTime);

//capturing all events in a array to compare with next element

         while (usageEvents.hasNextEvent()) {
            currentEvent = new UsageEvents.Event();
            usageEvents.getNextEvent(currentEvent);
            if (currentEvent.getEventType() == UsageEvents.Event.MOVE_TO_FOREGROUND ||
                    currentEvent.getEventType() == UsageEvents.Event.MOVE_TO_BACKGROUND) {
                allEvents.add(currentEvent);
                String key = currentEvent.getPackageName();
// taking it into a collection to access by package name
                if (map.get(key)==null)
                    map.put(key,new AppUsageInfo(key));
            }
        }

//iterating through the arraylist 
         for (int i=0;i<allEvents.size()-1;i++){
            UsageEvents.Event E0=allEvents.get(i);
            UsageEvents.Event E1=allEvents.get(i+1);

//for launchCount of apps in time range
             if (!E0.getPackageName().equals(E1.getPackageName()) && E1.getEventType()==1){
// if true, E1 (launch event of an app) app launched
                 map.get(E1.getPackageName()).launchCount++;
             }

//for UsageTime of apps in time range
            if (E0.getEventType()==1 && E1.getEventType()==2
                    && E0.getClassName().equals(E1.getClassName())){
                long diff = E1.getTimeStamp()-E0.getTimeStamp();
                phoneUsageToday+=diff; //gloabl Long var for total usagetime in the timerange
                map.get(E0.getPackageName()).timeInForeground+= diff;
            }
        }
//transferred final data into modal class object
        smallInfoList = new ArrayList<>(map.values());

}

另外，请告知这是否是一个好主意。我需要这个UI才能在移动设备和桌面上很好地工作。

Answer 1

您可以通过为“.dropdown-menu”元素应用固定高度来创建可滚动下拉列表，并设置“overflow-y：scroll;”

反应代码：

import React, { Component } from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import './QuantityInput.css'

export default class QuantityInput extends Component {
  render() {
    return (
      <DropdownButton
        bsStyle="default"
        bsSize="small"
        style={{ maxHeight: "28px" }}
        title={"Qty"}
        key={1}
        id="dropdown-size-small"
      >
        <MenuItem eventKey="1">Action</MenuItem>
        <MenuItem eventKey="2">Another action</MenuItem>
        <MenuItem eventKey="3" active>
          Active Item
        </MenuItem>
        <MenuItem divider />
        <MenuItem eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

QuantityInput.css

.dropdown-menu {
  height: 70px;
  overflow-y: scroll;
}

Answer 2

将此样式用于可滚动的DropdownButton

ul.dropdown-menu {
    max-height: 500px;
    overflow-y: scroll;
}

Answer 3

以下是一种可能的解决方案，它将根据视口高度动态缩放元素的最大高度：

import React, { Component } from 'react'
import { Button, Dropdown, MenuItem } from 'react-bootstrap'

export default class CustomDropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }
    toggle = () => {
        this.setState({ open: !this.state.open });
    }
    onToggle = (isOpen, e, source) => {
        //This closes the menu on toggling the dropdown or hitting esc.
        if (source.source === 'click' || source.source === 'rootClose') {
            this.toggle();
        }
    }

    render(){
        <div ref={(ref) => this.myRef = ref} className='CustomDropdown'>
            <Dropdown open={this.state.open}
                    onToggle={this.onToggle}
                    id={'Dropdown'}
                >
                <Button onClick={this.toggle}
                >{this.props.myTitle ? this.props.myTitle : 'Click Me'}</Button>
                 <Dropdown.Toggle style={{ textAlign: right, paddingBottom: 5 }} />
                <Dropdown.Menu style={{overflowY: 'scroll', maxHeight: (window.innerHeight - (this.myRef ? (this.myRef.getBoundingClientRect().top + this.myRef.getBoundingClientRect().height + 100) : 200))}}>
                    ... add menu items here
                </Dropdown.Menu>
            </Dropdown>
        </div>
    }
}

react-bootstrap中的可滚动下拉列表

3 个答案: