html 下拉框超出页面,当页面加了上拉后,popover的item太多超出div高度就无法显示...

Hello MUI

.mui-plus .plus {

display: inline;

}

.plus {

display: none;

}

#topPopover {

position: fixed;

top: 16px;

right: 6px;

}

#topPopover .mui-popover-arrow {

left: auto;

right: 6px;

}

p {

text-indent: 22px;

}

span.mui-icon {

font-size: 14px;

color: #007aff;

margin-left: -15px;

padding-right: 10px;

}

.mui-popover {

/* width: 100%; */

height: 300px;

}

.mui-content {

padding: 10px;

}

popover(弹出菜单)

popover(弹出菜单)是mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。

popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的

图标体验，

接着点击本页面右下角的“菜单”按钮体验。

除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：

打开弹出菜单

• Item1

• Item2
• Item3
• Item4
• Item5
• Item6
• Item7
• Item8
• Item9
• Item10
• Item6
• Item7
• Item8
• Item11
• Item12

mui.init({

pullRefresh: { //配置下/上 拉刷新

container: '.mui-content-padded',

up: {

height:50,//可选.默认50.触发上拉加载拖动距离

contentrefresh: '正在加载...',

callback: pullupRefresh

}

}

});

mui.plusReady(function() {

mui('.mui-scroll-wrapper').scroll();

mui('body').on('shown', '.mui-popover', function(e) {

mui('.mui-content-padded').pullRefresh().disablePullupToRefresh();

console.log('shown', e.detail.id);//detail为当前popover元素

});

mui('body').on('hidden', '.mui-popover', function(e) {

mui('.mui-content-padded').pullRefresh().enablePullupToRefresh();

console.log('hidden', e.detail.id);//detail为当前popover元素

});

});

/**

* 上拉加载拉取历史列表

*/

function pullupRefresh() {

alert("下拉")

mui('.mui-content-padded').pullRefresh().endPullupToRefresh();

}