温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-08 09:57:20 来源:亿速云 阅读:501 作者:iii 栏目:开发技术

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

实现代码:

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI