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

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

实现代码：

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

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. })

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