微信小程序底部弹窗动画
第一步,在组件里编写弹窗的代码
<!-- 活动类型弹框 -->
<view class='bottomModel' wx:if="{{modelFlag}}" catchtouchmove="toCatch"></view>
<view class='fixedModel' wx:if="{{modelFlag}}" animation='{{animationData}}'>
<view class='wraps'>
<view class='fixedTitle'>
<view class='commony' bindtap='noShow'>取消</view>
<view class='centerTitle'>活动类型</view>
<view class='commony' bindtap='sure'>确定</view>
</view>
<view class='fixedContent'>
<view class='contents' wx:for="{{arr}}" wx:for-index="idx" wx:key="idx">
<view class='items' bindtap='chooseItem' id="{{idx}}">
<image class='icons' wx:if="{{item.checked}}" src='{{choose}}'></image>
<image class='icons' wx:else src='{{quan}}'></image>
<view>{{item.classify_name}}</view>
</view>
</view>
</view>
</view>
</view>
第二部,在对应的点击事件中
//活动类型
activityType: function () {
// 用that取代this,防止不必要的情况发生
var that = this;
// 创建一个动画实例
var animation = wx.createAnimation({
// 动画持续时间
duration: 500,
// 定义动画效果,当前是匀速
timingFunction: 'linear'
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移,然后用step()完成一个动画
animation.translateY(550).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx:if
modelFlag: true
})
// 设置setTimeout来改变y轴偏移量,实现有感觉的滑动
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export()
})
}, 200)
},
第三部,隐藏弹框
noShow: function () {
var that = this;
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear'
})
that.animation = animation
animation.translateY(550).step()
that.setData({
animationData: animation.export() })
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export(),
modelFlag: false
})
}, 200)
},
注意:上面的550是你弹框的高度rpx,上面的catchtouchmove是弹框显示的时候防止地图的遮罩层滚动
toCatch:function(){
return false;
},
效果如下
微信小程序底部弹窗动画的更多相关文章
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- 微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
- 微信小程序开发心得--动画机制
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...
- 微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序底部导航栏部署
在微信小程序开发app.json(app.json它是定义全局页面) 只是用来部署微信底部的图标,最多不能大于五个 "tabBar":{ "selectedColor&q ...
- 微信小程序底部菜单栏的使用方法
1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color&qu ...
- 微信小程序底部弹框动画
在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...
- “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。
最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...
随机推荐
- SQL反模式学习笔记10 取整错误
目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...
- 使用kubeadm创建kubernets集群
参考: http://docs.kubernetes.org.cn/459.html https://blog.csdn.net/gui951753/article/details/833169 ...
- Python中的作用域及global用法
Python 中,一个变量的作用域总是由在代码中被赋值的地方所决定的. 函数定义了本地作用域,而模块定义的是全局作用域. 如果想要在函数内定义全局作用域,需要加上global修饰符. 变量名解析:LE ...
- [CF542D]Superhero's Job
[CF542D]Superhero's Job 题目大意: 定义函数 \[ J(x) = \sum_{\substack{1 \leq k \leq x \\ k \mid x \\ \gcd \le ...
- collections标准库
collections标准库 之前Python的第三方库用的一直很舒服,现在突然发现标准库也有collections这样的神器,可以补充list.set.dict以外的应用 1. namedtuple ...
- 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。
问题: 写一个带文本菜单的程序,菜单项如下(1) 取五个数的和 (2) 取五个数的平均值(X) 退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...
- struggle in the ACM(一)
struggle in the ACM(一) 2018/11/3 成为一名ACMer以后,第一次参加ACM正式比赛,果然是打铁了~ 回想起整场比赛的前前后后,其实拿到现在这个成绩,真的是情理之中却也是 ...
- AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
https 协议 默认端口号 443 http 协议 默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号 必须完全一致 违 ...
- 5. 箭头函数_this 指向_es6 常用语法
1. 箭头函数 函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回 () = ...
- Nestjs Graphql
文档 工作示例 安装依赖: npm i --save @nestjs/graphql apollo-server-express graphql-tools graphql app.module.ts ...