美文网首页
actionsheet(操作表)

actionsheet(操作表)

作者: 没有昵_称 | 来源:发表于2017-10-24 17:11 被阅读42次

actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover
类的节点上增加.mui-popover-bottom .mui-popover-action类;

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>

popover一样,推荐使用锚点方式显示、隐藏actionsheet;若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可,如下:

mui('#sheet1').popover('toggle');


从底部动画弹出系统样式选择按钮框 原生actionSheet

plus.nativeUI.actionSheet({
    title:title,  //标题
    cancel:'取消',
    buttons:btn,     //[{title:"不同意",style:"destructive"}]   destructive:红色,默认黑色            
},function(e){
    console.log(e.index);               
}) 

相关文章

网友评论

      本文标题:actionsheet(操作表)

      本文链接:https://www.haomeiwen.com/subject/narxpxtx.html