侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   3777

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

先上效果图:

在这里插入图片描述
1.蒙层的结构:

     //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件      //这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡          已选商品(1)      清空购物车              {{item.Cname}}      ¥{{item.Cprice}}              -           {{item.Cnum}}        +               

注意:三元运算符里的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.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。

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

您可能感兴趣的文章:

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例


  • 上一条:
    微信小程序使用npm包的方法步骤
    下一条:
    微信小程序引入Vant组件库过程解析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在go语言中对Grpc工具buf.build使用流程步骤(0个评论)
    • 宝塔面板Nginx开启Brotli压缩流程步骤,提升网站加载速度(0个评论)
    • 在go语言中如何判断用户代理是否为移动设备的示例(0个评论)
    • 在go语言中实现一个函数来检查用户代理是否是机器人或爬虫的示例(0个评论)
    • Laravel 10.13版本发布(0个评论)
    • 在github创建task的同时创建分支流程步骤(0个评论)
    • 在go语言中以邮件标题中获取SPF和DMARC,来判断是否为垃圾邮件之垃圾邮件过滤器功能实现(0个评论)
    • 在go语言中使用attr字段标签提取XML属性数据示例(0个评论)
    • 在laravel中介绍一个生成假数据的PHP库:FakerPHP(0个评论)
    • 在laravel框架中对环境配置文件的加载过程步骤浅析(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客