微信小程序滑动屏幕控制动画隐藏和显示

思路一，使用scroll-view组件的事件，缺点：动画不够流畅
思路二，微信小程序自带的pagescroll事件，缺点：监听不方便，层级较高
思路三，给页面最外层添加触摸事件
思路四，小程序自带的触摸事件的API
一个触摸开始的监听，一个触摸结束的监听。为了实现动画流畅，加上一定的延时延时，动画速度均匀即可。

rowTouchMove:function(){if(console.log("rowTouchMove--------------------111"),this.data.plaTreesInfo.open&&this.props.TouchMoveFlag){ //设置两个默认的动画开关条件var t=wx.createAnimation({duration:this.data.duration,timingFunction:"linear"});t.translate3d(90,0,0).step(),this.setData({animationData:t.export()}),this.props.TouchMoveFlag=!1}  //改变动画开关状态},
rowTouchEnd:function(){var t=this;console.log("rowTouchEnd--------------------222"),this.data.plaTreesInfo.open&&setTimeout(function(){//读取开关动画条件var e=wx.createAnimation({duration:t.data.duration,timingFunction:"linear"});e.translate3d(0,0,0).step(),t.setData({animationData:e.export()}),t.props.TouchMoveFlag=!0 //改变动画开关状态},600)
},

注意，如果不给动画加开始和结束的默认条件约束，动画会显示的很频繁，不能灵活读取

微信小程序滑动屏幕控制动画隐藏和显示相关推荐

微信小程序实现js控制动画——点击播放动画
功能需求:点击刷新图标,图标旋转进入Loading状态,加载完毕,动画停止 //index.wxml <view class="flex-col group_2">&l ...
微信小程序控制盒子显示隐藏_微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏首先我们先来看一下单个点击效果我们来看一下wxml中的代码: 更多内容更多> 2017-07-27 下面的是js中的主要代码: data: { shows ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序滑动侧边栏
微信小程序滑动侧边栏效果图: 手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏代码附上:.wxml <view class="title"><image cla ...
【微信小程序控制硬件⑦ 进阶篇】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为心里全栈工程师梦想浇水。
文章目录一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序各种酷炫动画
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/anda0109/article/de ...

微信小程序滑动屏幕控制动画隐藏和显示

微信小程序滑动屏幕控制动画隐藏和显示相关推荐

最新文章

热门文章