微信小程序实现点击空白隐藏的方法示例


Posted in Javascript onAugust 13, 2019

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。

先上效果图:

微信小程序实现点击空白隐藏的方法示例
1.蒙层的结构:

<!-- 购物车蒙层 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>     //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件
  <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>
//这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡
    <view class='in-content'>
      <text>已选商品(1)</text>
      <text class='iconfont icon-6'>清空购物车</text>
    </view>
    <view class='cho-list' wx:for="{{chooseList}}" wx:key="">
      <view class='listName'>{{item.Cname}}</view>
      <view class='listPrice'>¥{{item.Cprice}}</view>
      <view class='opBtn'>
        <view class='com-btn cuts' >-</view>   
        <view class='com-num'>{{item.Cnum}}</view>
        <view class='com-btn add' >+</view>   
      </view>
    </view>
  </view>
</view>

注意:三元运算符里的slideup和slidedown一定要加上引号

2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式:

@keyframes slidedown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
.slidedown {
  animation: slidedown 0.5s linear ;
}
.slideup {
  animation: slideup 0.5s linear ;
}
@keyframes slideup {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

其它的样式:list-fix是fixed定位,而in-list是absolute定位。

需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。

3.js

page({
  data: {
    mengShow:false,//蒙层的显示与否
   aniStyle:true,  //动画效果,默认slideup     
  },
  //蒙层的显示
  showMeng:function(e){     //这是“确认下单”这整个购物车导航栏的点击事件
    this.setData({
      mengShow:true,      //蒙层显示
      aniStyle:true



//设置动画效果为slideup
    })
  },
  outbtn:function(e){      //这是list-fix的点击事件,给它绑定事件,是为了实现点击其它地方隐藏蒙层的效果
    var that=this;
    this.setData({




      aniStyle:false


//设置动画效果为slidedown
    })
    setTimeout(function(){    //延时设置蒙层的隐藏,这个定时器的时间,就是slidedown在css动画里设置的时间,这样就能实现slidedown动画完成后,蒙层才消失的效果。不设置定时器会导致动画效果看不见
      that.setData({
        mengShow: false
      })
    },500)
  },
  inbtn:function(e){     //这个事件必须有,就算不做什么事情也要写上去,因为这个事件是为了防止事件冒泡,导致点击in-list这里面的元素时,点击事件冒泡到list-fix触发它的slidedown事件。
    console.log("in")
  }, 
})

这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。

总结:

1.防止冒泡的点击事件:catchtap=“”

2.点击父元素除子元素以外的其它地方隐藏父元素的方法:父元素绑定一个点击隐藏事件,然后子元素绑定catchtap这种能阻止冒泡的事件

3.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
详解json串反转义(消除反斜杠)
Aug 12 #Javascript
json 带斜杠时如何解析的实现
Aug 12 #Javascript
electron实现静默打印的示例代码
Aug 12 #Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 #Javascript
You might like
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python实现发送邮件功能
2017/07/22 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python实现验证码识别
2020/06/15 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
数字天堂软件测试面试题
2012/12/23 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
优秀员工表扬信
2014/01/17 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
开业庆典主持词
2014/03/21 职场文书
防溺水主题班会教案
2015/08/12 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Python first-order-model实现让照片动起来
2022/06/25 Python