MUI折叠面板accordion中有个按钮,点击触发了折叠面板的事件

MUI折叠面板accordion中有个按钮,点击触发了折叠面板的事件,第1张

1、折叠面板

折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:

<ul class="mui-table-view">

<li class="mui-table-view-cell mui-collapse">

<a class="mui-navigate-right" href="#">面板1</a>

<div class="mui-collapse-content">

<p>面板1子内容</p>

</div>

</li>

</ul>

可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,使用的就是折叠面板控件。

为解决HTML5在低端Android机上的性能缺陷,mui引入了原生加速,其中最关键的就是webview控件,因此mui若要发挥其全部能力,需和5+ App配合适用,若脱离5+ App,mui功能会受限,主要涉及三个部分:一、webview窗口相关涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,涉及功能点包括:webview模式窗体动画创建子窗口(除了为解决区域滚动的常见双webview场景,还涉及webview模式的选项卡等多webview场景)webview模式的侧滑菜单(也有div方式侧滑菜单)webview模式的tab选项卡(也有div方式选项卡)nativeUI,如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。预加载自定义事件二、第三方扩展插件涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,目前主要包括:语音输入;三、Touch事件相关(注意pc浏览器没有touch事件)Touch事件相关的,手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。但普通PC端浏览器因为没有touch事件,可以显示控件但滑动 *** 作功能会受限;涉及功能点包括:手势事件mui封装的tap相关处理业务:折叠面板、二级列表、二级选项卡;mui封装的swipe、drag相关处理业务:图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡【备注】:在PC端,大家将tap替换成click,将HTML5默认的Drag事件替换mui 的swipe和drag,就可以解决如上两个问题。除上述列出的功能点,其它mui功能,均可以在其它手机浏览器及PC服务端使用,所有CSS均不受影响。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/sjk/9526796.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存