微信小程序滚动动画,微信小程序全屏动画滚动

发布时间:2023-08-28 17:44:27 作者:lsjchm 阅读量:5140



微信小程序全屏动画滚动


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

 

***本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。

我要评论

网友评论


评论时间:2023-12-08 13:00:06

app制作教程,是在教学的过程中通过各种方式来提高学生的动手智能共享茶室app开发的功能 能力和学习效率手机游戏app开发制作RPG 习效率

回复
秒制作
Catfish(鲶鱼) Blog V 4.7.3