微信小程序怎么实现全屏动画滚动

这篇文章主要介绍“微信小程序怎么实现全屏动画滚动”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么实现全屏动画滚动”文章能帮助大家解决问题。

实现代码：

1. Page({

2.   data: {

3.     scrollindex:0,  //当前页面的索引值

4.     totalnum:5,  //总共页面数

5.     starty:0,  //开始的位置x

6.     endy:0, //结束的位置y

7.     critical: 100, //触发翻页的临界值

8.     margintop:0,  //滑动下拉距离

9.   },

10.   onLoad: function () {

11.   },

12.   scrollTouchstart:function(e){

13.     let py = e.touches[0].pageY;

14.     this.setData({

15.       starty: py

16.     })

17.   },

18.   scrollTouchmove:function(e){

19.     let py = e.touches[0].pageY;

20.     let d = this.data;

21.     this.setData({

22.       endy: py,

23.     })

24.     if(py-d.starty<100 && py-d.starty>-100){   

25.       this.setData({

26.         margintop: py – d.starty

27.     })

28.     }

29.   },

30.   scrollTouchend:function(e){

31.     let d = this.data;

32.     if(d.endy-d.starty >100 && d.scrollindex>0){

33.       this.setData({

34.         scrollindex: d.scrollindex-1

35.       })

36.     }else if(d.endy-d.starty <-100 && d.scrollindex<this.data.totalnum-1){

37.       this.setData({

38.         scrollindex: d.scrollindex+1

39.       })

40.     }

41.     this.setData({

42.         starty:0,

43.         endy:0,

44.         margintop:0

45.     })

46.   },

47. })

关于“微信小程序怎么实现全屏动画滚动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云搜网行业资讯频道，小编每天都会为大家更新不同的知识点。