微信小程序怎么實現全屏動畫滾動

這篇文章主要介紹“微信小程序怎么實現全屏動畫滾動”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么實現全屏動畫滾動”文章能幫助大家解決問題。

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

關于“微信小程序怎么實現全屏動畫滾動”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。