小程序仿安卓动画滑动效果滑动动画效果实现

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

效果图：

源码

var start_clientY; //记录当前滑动开始的值
var end_clientY; //记录当前滑动结束的值
var animation = wx.createAnimation({duration: '400'
}); //初始化动画var history_distance = 0; //历史距离
Page({// 滑动开始touchstart: function(e) {start_clientY = e.changedTouches[0].clientY// console.log('touchstart', start_clientY)},// 滑动结束touchend: function(e) {console.log('e', e)end_clientY = e.changedTouches[0].clientY;var item = Number(e.target.id);var end = end_clientY - start_clientYconsole.log('滑动距离', end, '当前下标', item)// 不是第一张j   Math.abs(end)=> 求绝对值if (Math.abs(end) < 20) {wx.showToast({title: '点击了' + this.data.list[item].img,icon: 'none'})return};// 如果是下拉第一张图片，整体动画if (item == 0) {for (var i = 0; i < this.data.list.length; i++) {animation.translateY(80 * i!=0?80*i:80).step();this.setData({['animation[' + i + ']']: animation.export(),})}setTimeout(() => {for (var i = 0; i < this.data.list.length; i++) {animation.translateY(0).step();this.setData({['animation[' + i + ']']: animation.export(),})}}, 450)return}//开始滑动当前的 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓// 需要计算缓存，默认没有，所以在onLoad先初始化，让默认有history_distance = this.data.animation[item].actions[0].animates[0].args[0];let item_args = end + history_distance > 0 ? end + history_distance : 0;console.log('当前滑动的图片滑动距离', item_args)animation.translateY(item_args).step();this.setData({['animation[' + item + ']']: animation.export(),})//开始滑动当前的 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑// 如果历史滑动大于0，就是往下拉if (end != 0) {for (var i = 1; i < this.data.list.length; i++) {// 让内层的都跟着滑动var _item_1 = item - i;if (_item_1 > 0) {animation.translateY(item_args / 2 / i).step();this.setData({['animation[' + _item_1 + ']']: animation.export(),})}// 如果不是最后一张图并且小于图片数组的长度,让外层的都跟着滑动var _item_2 = item + i;if (item != this.data.list.length - 1 && _item_2 < this.data.list.length) {animation.translateY(item_args * 2 * i).step();this.setData({['animation[' + _item_2 + ']']: animation.export(),})}}} else {// 如果历史滑动等于0，重新初始化this.inti();}},// ================================================================================================================================onShow() {// 初始化this.inti();},onLoad(e) {},// 初始化inti() {for (var i = 0; i < this.data.list.length; i++) {this.setData({['animation[' + i + '].actions[0].animates[0].args[0]']: 0,})}},data: {windowWidth: wx.getSystemInfoSync().windowWidth,list: ['https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=935292084,2640874667&fm=27&gp=0.jpg', 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205470526,1518785822&fm=27&gp=0.jpg', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=873265023,1618187578&fm=27&gp=0.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3967239004,1951414302&fm=27&gp=0.jpg'],animationArr: [],animation: [],scrollTop: 100},
})

<view class='bg' ><block wx:for='{{list}}' wx:key=''><image bindtouchend='touchend' bindtap='click' bindtouchstart='touchstart' id='{{index}}' animation='{{animation[index]}}' class='borner' style='top: {{index*80}}rpx;' src='{{item}}'></image></block>
</view>

css

page{height: 100%;
}
.bg{height: 100%;width: 100%;position: fixed;
}
.top_title{position: relative;
}
image{margin-top: 50rpx;width: 90%;height: 90%;margin-left: 5%;position: absolute;border-radius: 10rpx;
}

小程序仿安卓动画滑动效果滑动动画效果实现相关推荐

微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
微信小程序仿支付宝年账单页面滑动的效果展示
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 近来要做一个年账单页面,类似于支付宝年账单,就是对一年下单的总结,但是支付宝页 ...
html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
微信小程序界面禁止下拉左右滑动_手机 QQ v8.0 正式版上线，新界面，新功能...
本文授权转自艾橙互动公众号. 经过一段时间内测,QQ手机版8.0 版本正式上线了. 目前iOS 版本已经更新,iOS 用户可以通过在App Store 进行更新体验,目前版本为v8.0.0.472. ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
php按住说话然后播放,小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml bind:longpress="onLongpress" cat ...

小程序仿安卓动画滑动效果滑动动画效果实现

承接微信小程序开发。扫码加微信。

小程序仿安卓动画滑动效果滑动动画效果实现相关推荐

最新文章

热门文章