微信小程序仿支付宝年账单页面滑动的效果展示

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

近来要做一个年账单页面，类似于支付宝年账单，就是对一年下单的总结，但是支付宝页面滑动的效果在小程序上是有些bug的，柚子也是研究了很久了，但自认还算完美吧，下面把过程说一下，希望能对某些朋友有所帮助：

1、首先要有页面滑动动画的效果，就必须要监听页面的滚动，监听你手指是向上还是向下滑动的，这里柚子是用的bindtouchstart，bindtouchmove，他可以监听你手指的动作

<view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"></view>

bindtouchstart开始滑动，bindtouchmove正在滑动，bindtouchend结束滑动

但是在这之前你还要做一个操作，因为你只是要感受到手指滑动的动作，并不是要让页面真的滑动，所以我们要先将页面滑动效果给禁止掉，而禁止的方法就是catchtouchmove

<view class="boxs" catchtouchmove="noneEnoughPeople"><view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"></view>
</view>

2、写好之后，第二步，我们就可以先在这个里面去写页面了，比如说一共有四页，那么可以这样写：

<view class="boxs" catchtouchmove="noneEnoughPeople"><view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"><view class="box1">第一页</view><view class="box2">第二页</view><view class="box3">第三页</view><view class="box4">第四页</view></view>
</view>

.boxs {width: 100%;height: 100%;position: absolute;
}
.box1 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top:0;display: flex;align-items: center;justify-content: center;
}
.box2 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 100%;display: flex;align-items: center;justify-content: center;
}
.box3 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 200%;display: flex;align-items: center;justify-content: center;
}
.box4 {width: 100%;height: 100%;background: #2da4a8;position: absolute;top: 300%;display: flex;align-items: center;justify-content: center;
}

3、页面搭建好之后开始写js

Page({/*** 页面的初始数据*/data: {lastY: 0,//监听滑动动作的记录数据page: 1,//定义一个页面，我们需要知道当前页面是第几页text: ''//这是一个判断向上和向下滑动的数据},noneEnoughPeople() {//禁止页面滑动的方法，可以不做任何操作，但是必须要写},//滑动开始的操作，记录滑动开始的位置，用于判断是向上滑动还是向下滑动handletouchtart: function(event) {// 赋值this.data.lastY = event.touches[0].pageY},//滑动中，判断是向上还是向下handletouchmove(event) {let currentY = event.touches[0].pageY;let ty = currentY - this.data.lastY;if (ty < 0) {this.setData({text: '向上'})} else {this.setData({text: '向下'})}this.data.lastY = currentY},//滑动结束，通过判断是向上还是向下来计算页面滚动的位置handletouchend(event) {console.log(this.data.text, this.data.page)if (this.data.text == '向上') {if (this.data.page == 1) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight,duration: 500})this.setData({page: 2})} else if (this.data.page == 2) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 2,duration: 500})this.setData({page: 3})} else if (this.data.page == 3) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 3,duration: 500})this.setData({page:4})}} else {if (this.data.page == 2) {wx.pageScrollTo({scrollTop: 0,duration: 500})this.setData({page: 1})} else if (this.data.page == 3) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight,duration: 500})this.setData({page: 2})} else if (this.data.page == 4) {wx.pageScrollTo({scrollTop: wx.getSystemInfoSync().windowHeight * 2,duration: 500})this.setData({page: 3})}}},
})

写到这一步已经可以去看一下效果应该已经实现了，好了分享到此结束了，希望能帮助到一些朋友吧，有问题的朋友请在下方留言。

微信小程序仿支付宝年账单页面滑动的效果展示相关推荐

微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
微信小程序第五篇：页面弹出效果及共享元素动画
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册目录一.page-caon ...
微信小程序_wxcharts(图表不随页面滑动因素之一)
1.wxml 2.wxss 没错,就是父级overflow: auto会影响到wxcharts图表在页面固定而不随页面滑动
微信小程序仿支付宝账单列表
支付宝是咋做的咱也不知道先把效果实现了再说效果图如下: js代码后端根据最后的时间向后查询size条数据 getData() {const params = {page: 1,size: 1 ...
微信小程序仿发布朋友圈页面
发表动态可以选择图片和视频 wxml: <l-form name="form" l-form-btn-class="l-form-btn-class" b ...
微信小程序第六篇：元素吸顶效果实现
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册微信小程序第五篇:页面弹出效 ...
微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...

微信小程序仿支付宝年账单页面滑动的效果展示

微信小程序仿支付宝年账单页面滑动的效果展示相关推荐

最新文章

热门文章