微信小程序实现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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
微信小程序实现拖拽功能
2019/09/26 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
浅析python中的del用法
2020/09/02 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
市场营销方案范文
2014/03/11 职场文书
红头文件任命书范本
2014/06/05 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
技术员个人工作总结
2015/03/03 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle