【注意】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. dismount ASM磁盘组,影响未使用的其它ASM磁盘组

    # 问题概述登录数据库,查看活动会话,发现大量library cache lock ,log file switch (archiving needed),归档失败,redo log无法重用.# 问题 ...

  2. ant design vue datePicker 日期时间范围设置默认为当天0点-23点59

    <template> <a-card :bordered="false"> <a-range-picker show-time :default-va ...

  3. 开始学python不知该怎么学?Python基础教程(第2版) 免费下载

    Python基础教程(第2版)pdf高清版免费下载  解压码:n0nl   内容简介  · · · · · · 本书是经典教程的全新改版,作者根据Python 3.0版本的种种变化,全面改写了书中内容 ...

  4. 从零开始升级基于RuleBased的聊天机器人

    这里记录从最基础的基于规则的聊天机器人,升级到基于逻辑的机器人,再升级到调用Google提供的API来让机器人能说.会听普通话. 最基本的完全基于规则式的问答:问什么就答什么,幼儿园水平. impor ...

  5. ACE下载地址

    https://download.dre.vanderbilt.edu/previous_versions/ 在某n中找了大半天愣是没人贴出来

  6. Day13 字符串的常用方法

    API帮助文档的使用流程 在索引的位置搜索自己要查看的类 看包 目的:是不是 Java.lang包(核心包),不需要编写导包代码(import) -------不是 java.lang包,都需要编写导 ...

  7. Neo4j插件安装

    Neo4j插件安装 Author:wss Date:2022.6.9 Topic:Neo4j插件安装 一.前言 昨天再次安装Apoc插件,又去找之前看的教程,有些地方不够清晰要几个教程对比着看,想到可 ...

  8. css实现水波纹

    携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第23天,点击查看活动详情 ui设计的元素有时候需要有一些动画效果,可以直接用css动画来实现. 实现一个中心圆向四周有水波纹的效果 ...

  9. frp使用教程

    内网穿透工具---frp使用教程 https://blog.csdn.net/u011215939/article/details/103383373

  10. react项目--redux封装

    index.ts 1 const store = { 2 state: { 3 num: 20, 4 }, 5 actions: { 6 // 放同步的代码 7 add1(newState: { nu ...