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


Posted in Javascript onDecember 11, 2018

本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考,具体如下:

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

先上效果图:

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

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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
You might like
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python中的插入排序的简单用法
2021/01/19 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
财务人员个人自荐信范文
2013/09/26 职场文书
护理学毕业生自荐信
2013/10/02 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
企业文明单位申报材料
2014/05/16 职场文书
科学发展观演讲稿
2014/09/11 职场文书
个人工作表现自我评价
2015/03/06 职场文书
司机岗位职责范本
2015/04/10 职场文书