【注意】css放的位置可能影响效果

参考a-level

competitionFilterCover

1.容器:position: absolute;

top: 100vh;

animation: moveon 0.5s forwards;

2.添加属性:hideAnimate

3.

class="root {{hideAnimate ? 'rootHide' : ''}}"

class="whiteContent {{hideAnimate ? 'contentHide' :''}}"

4.

hideSelf(){

this.setData({

hideAnimate: true

})

setTimeout(() => {

this.setData({

show: false

})

}, 400);

},

小程序modal弹窗的更多相关文章

  1. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  2. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  3. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  4. 微信小程序 - 自定义弹窗组件

    2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...

  5. 微信小程序底部弹窗动画

    第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" c ...

  6. 微信小程序自定义弹窗(可通用)

    效果图 .wxml <cover-view class='mask' wx:if='{{isShow}}'> <cover-view class='modal'> <co ...

  7. Taro -- 微信小程序密码弹窗

    记录一个类似支付密码的弹窗写法,实现是否免密功能.如图: index.js   import Taro, { Component } from '@tarojs/taro'   import { Vi ...

  8. 小程序modal解决

    data{ shareDialog:false, } <cover-view wx:if="{{shareDialog}}" class="list_tab&quo ...

  9. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  10. 小程序自定义modal弹窗封装实现

    前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示, ...

随机推荐

  1. 第六周作业-N67044-张铭扬

    1. 简述DDL,DML,DCL,DQL,并且说明mysql各个关键字查询时候的先后顺序 DDL:Data Defination Language 数据定义语言,主要是建表.删除表.修改表字段等操作 ...

  2. Day 13 13.1 refer反爬

    Referer 一.referer是什么: 图片防盗链的技术应该还有其他的,目前了解到的是浏览器的referer,其实这是错误的拼写,正确是应该是referrer.不过现在可以看到Chrome的开发者 ...

  3. shell实现接口初次失败告警,恢复也发送一次通知

    1.该shell判断 第一次失败告警,接口恢复发送一次通知 参数:一个参数接口返回结果0 表示成功 1表示失败 脚本详情 [root@localhost bd]# more bd-new.sh #!/ ...

  4. pytorch gpu安装cuda11.*

    conda install pytorch==1.12.0 torchvision==0.13.0 torchaudio cudatoolkit=11.3

  5. linux下yum安装时出现Loaded plugins: fastestmirror

    linux使用yum安装软件时出现报错Loaded plugins:fastestmirror,是提示这个插件不能使用了,fastestmirror是yum的一个加速插件, 解决的办法是:将这个插件禁 ...

  6. 【个人笔记】CentOS 安装 Docker CE

    要在 CentOS 上开始使用 Docker CE,请确保 满足先决条件,然后 安装Docker. 1. 卸载旧版本 sudo yum remove docker docker-client dock ...

  7. Advanced Rest Client 测试工具安装

    浏览器安装测试工具: Advanced Rest Client 1.下载插件,下载后解压 链接:https://pan.baidu.com/s/1DD5PgmkX_AG-JhUh8EVtqQ?pwd= ...

  8. iOS开发之UIImage在压缩时失真问题,压缩图片的大小

    今天遇到UIImage在压缩时失真问题,压缩图片的大小图片模糊 错误的方案 /** * 压缩图片 * image:将要压缩的图片 size:压缩后的尺寸 */ -(UIImage*) OriginIm ...

  9. 078_Sublime HaoIDE 搭建 Lightning Aura环境

    随着 Classic 不断的向 1 .HaoIDE->Setting->User Setting 请把以下内容copy进去,修改账号密码token以及项目名称,例子中列举了两个Projec ...

  10. mysql函数实现oracle的序列

    1.创建一张伪序列表 CREATE TABLE sequence ( seq_name VARCHAR (50) NOT NULL,-- 序列名称 current_val INT NOT NULL,- ...