美文网首页
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