uni-app的灰朦层取消滑动以及官方弹出框设计代码

html代码

<button type="primary" @click="discount">点击事件</button><view class="discount" :class="showt?'':'discount_dh'"></view><view class="tui-actionsheet-mask" @touchmove.stop.prevent="" :class="[showt?'':'tui-mask-showt']" @tap="handleClickMask"></view>

js代码

export default {data() {return {//点击遮罩 是否可关闭maskClosable: {type: Boolean,default: true},//文本内容是否展示showt: {type: Boolean,default: false}}},methods: {//点击事件discount(){    console.log(123);this.showt=false},//点击灰朦层是否关闭handleClickMask() {this.showt=true}}}

css代码

.discount{position: fixed;bottom: 0;width: 100%;/* height: 299rpx; */z-index: 9999;background-color: #FFFFFF;transform: translate3d(0, 100%, 0);transform-origin: center;transition: all 0.3s ease-in-out;visibility: hidden;
}
.discount_dh{transform: translate3d(0, 0, 0);visibility: visible;
}
.tui-actionsheet-mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);z-index: 9996;transition: all 0.3s ease-in-out;opacity: 0;visibility: hidden;}
.tui-mask-showt {opacity: 1;visibility: visible;}

给灰朦层添加 @touchmove.stop.prevent="" 设置滑动事件就可以取消滑动需要的效果自己添加这个样式是根据官网文档拿下来的

uni-app的灰朦层取消滑动以及官方弹出框设计代码相关推荐

layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
【JavaScript】（9）——实例：滑动效果的弹出框
背景:用户的需求千奇百怪,为了满足用户对界面的需求,我这只小菜鸟也是"拼了小命"了.弹出框,大家都很熟悉吧,但是在弹出框中加上滑动效果,这个就是有点小难了,为了这个效果我也是搜寻了 ...
AlertDialog,安卓自带取消确认按钮的弹出框
private void showMyDialog(){AlertDialog.Builder builder = new AlertDialog.Builder(context);builder.s ...
小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...
layui点击弹出层中按钮，关闭弹出层
layui点击弹出层中按钮,关闭弹出层原理:点击自己定义的button时,触发弹出层右上角取消按钮. <button type="button" lay-submit=&q ...
element-ui中$confirm弹出框的确定和取消按钮互换位置
element-ui中$confirm弹出框的确定和取消按钮互换位置 (1)定位元素 (2)找到元素class,通过flex布局,进行位置更换 (3)app.vue中进行全局修改 /* 确认窗取消 ...
Teams Meeting App的 task 弹出框
前几篇文章我们介绍了 Teams Meeting App 的各种类型和如何从无到有的使用 net6 和 c# 来开发一个 Teams Meeting app,那今天我们开始讨论一些 meeting a ...
弹出框背景固定滑动
// 弹出框背景滑动问题 style.cssText 弹出框父级absolute body fixed 弹出框absolute 也是一种解决方案 val 变量,当前弹出框状态huaDong (val ...
js 弹出框背景不滑动方案
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 js 弹出框 ...

uni-app的灰朦层取消滑动以及官方弹出框设计代码

uni-app的灰朦层取消滑动以及官方弹出框设计代码相关推荐

最新文章

热门文章