mui隐藏底部弹出的actionsheet

于 2020-06-27 08:26:11 发布
阅读量457 收藏
点赞数
分类专栏： # mui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/horizon_junmowen/article/details/106960546
版权
前端 同时被 2 个专栏收录
26 篇文章 2 订阅
订阅专栏
mui
2 篇文章 0 订阅
订阅专栏

在这里插入图片描述

解决：
在js中写

mui('.mui-popover-action').popover('toggle');//隐藏底部弹出的菜单

在这里插入图片描述

此时的效果：
在这里插入图片描述

当点击删除的时候，会弹出确认信息，此时，actionsheet菜单不能跟提示信息共同显示，需要隐藏
在这里插入图片描述

嘉戈
关注
专栏目录
mui自定义底部弹框
qianqianliu123的博客
07-15 1292
底部弹框html(#app为页面样式，.tankuang为底部弹出框,.me为按钮) <div id="app"> <buttton class="me"></button> </div> <div class="tankuang">/div> 底部弹框样式css（一定要写position:fixed） .tankuang{ ...
MMActionSheet介绍(自定义的UIActionSheet弹出框组件)
MinMao的博客
10-12 1808
MMActionSheetIntroductionMMActionSheet 是一个简单的弹出选择框，使用纯swift编写，类似于微信的actionsheetMMActionSheet is an simple pop-up selection box(ActionSheet) written in pure Swift. Similar to the wechat actionsheetRquir
微信小程序 --- action-sheet底部弹框
weixin_34050519的博客
03-01 428
action-sheet：从屏幕底部弹出一个菜单，选择： 使用的时候，在给不同的 action-sheet-item 添加不同的事件。 效果： （这里的确定可以有多个） 代码： <button type="primary" bindtap="btnclick">按钮</button> <action-sheet hidden="{{onOff}}"&...
用mui做弹框，弹框内部自定义html
Mr_Susy的博客
04-24 3118
背景：app需要做一个弹框，用户第一次下载安装该app的时候需要提醒用户阅读对应的服务协议以及隐私协议，如下图 app采用的是H5加原生的方式开发的，弹框采用的是mui框架，由于之前弹框内容大多是提醒的内容没有涉及到弹框内跳转，代码很简单但是踩了好几个坑，分享一下，希望大家避免，上代码 1.添加该段js，否则弹框内的a标签不会进行跳转 2.调用mui.confirm(me...
ionic4 actionSheet返回不消失问题
李勇杰
02-25 986
项目中需要用到模态框，但是发现一个问题，点击按钮可以显示模态框，但是点击浏览器返回的时候模态框仍然显示； 于是想到让界面离开的时候调用actionSheet的dismiss()方法，这样前一个问题解决了，但是又有了新的问题：overlay does not exist 经过Google和排查，发现如果模态框存在的时候点返回就不会有这个问题，如果没有模态框就会报错所以在退出的时候判断模态框是否存在，...
弹出层MUI框架美化.rar
06-19
总之，MUI框架的弹出层组件是一个强大且灵活的工具，通过深入理解和实践“弹出层MUI框架美化.rar”中的内容，开发者可以掌握弹出层的使用技巧，为自己的项目打造出更具吸引力和易用性的用户界面。无论是简单的信息...
MUI 使用原生底部栏（中间凸起图片）
11-06
本主题聚焦于"MUI 使用原生底部栏（中间凸起图片）"，这是一项提升用户体验的重要设计元素。MUI，全称 Moblie UI，是阿里巴巴集团推出的一款开源前端框架，它专为移动端设计，提供了丰富的组件和样式，使得开发者...
mui底部弹出层列表详情
最新发布
09-10
在mui框架中实现底部弹出层列表详情，通常会用到mui的弹出层组件，开发者需要编写JavaScript代码来控制弹出层的显示与隐藏，并通过CSS来定义样式。具体实现步骤大致如下： 1. 在页面中引入mui相关的CSS和JS文件。 2....
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
MUI侧滑导航菜单可以实现当用户在微信小程序页面上从右侧向左侧滑动时，右侧内容区滑动而左侧菜单保持不动，这种效果被称作“Popup弹出式”。实现这种效果，需要开发者对微信小程序的页面布局、事件处理有深入理解。...
MUI-actionsheet（操作表）
LzzMandy的博客
12-13 3603
    一、布局，包括： 1、顶部状态栏 &lt;header &gt;&lt;/header&gt;，挡在body 最开始位置 2、中间内容：文字+【拍照】，放在&lt;div class="mui-content"&gt;&lt;/div&gt;内部 3、底部导航【删除】&lt;nav class="mui-bar mui-bar-tab"&gt;&lt;/div&am
MUI组件：弹出层组件 - 案例篇
热门推荐
草巾冒小子的博客
05-27 1万+
全部代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1...
004_跨平台开发_MUI_操作表（actionsheet）
qq_33605778的博客
10-23 569
效果介绍 actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类； popover(method: String)
mui消息框alert，confirm，prompt，toast
weixin_30825581的博客
05-17 360
<script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeBack: true //启用右滑关闭功能 }); var info = document.getElementById("info"); document.getElementById(...
mui 弹框
tiankongxiao的博客
04-22 1354
首先，引入 mui.css或者mui.min.css 引入mui.min.js或者mui.js 第二步：<a href="#弹窗ID"> </a> //控制弹窗的显示隐藏 <div id="弹窗ID" class="box mui-popover mui-popover-action mui-popove...
MUI-ActionSheet动作菜单
知他人之所知，晓他人之不晓。
08-06 8925
MUI-ActionSheet动作菜单大家都知道在APP上，用一个非常好用的菜单模式。就是ActionSheet.具体体现就是默认折叠在界面之外。当触发某个动作时可以将隐藏的菜单显示出来。 废话不多说。我们来看看在MUI框架中是如何实现这个强大的功能的。<!DOCTYPE html> <html> <head> <meta charset="utf-8">
MUI actionsheet(操作表）
秋城落叶的博客
03-31 746
actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover， 故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类； 推荐使用锚点方式显示、隐藏...
MUI 底部弹出的选择框
weixin_30521649的博客
11-17 1023
大致是这样： 第一种方法：这种方法是使用5+的nativeUI原生动画 1)引入：mui.css或者mui.min.css 　　　　mui.js或者mui.min.js也行 　　　　mui.picker.min.js 代码： 1 document.getElementById('触发对象的ID').addEventListener('tap', function() { ...
微信小程序 wx.showActionSheet 在安卓机上不显示“取消”的解决方法
一只小菜鸟的博客
09-17 1614
小程序在使用 wx.showActionSheet 方法时， iOS 与开发者工具上效果一样，而在 Android 机上则是在屏幕中间弹出，只有itemList里的内容，没有取消按钮，所以需要我们添加一下。 var system = wx.getSystemInfoSync() //获取系统信息 var itemList = ['男生', '女生'] if (/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值