立即咨询

提交后我们会尽快与您联系

本分类最新文章

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

2022-04-05
5979 浏览
4 评论
闻道君
原文链接


微信小程序全屏动画滚动


  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. tShopfas.setData({
  15. starty: py
  16. })
  17. },
  18. scrollTouchmove:function(e){
  19. let py = e.touches[0].pageY;
  20. let d = tShopfas.data;
  21. tShopfas.setData({
  22. endy: py,
  23. })
  24. if(py-d.starty-100){
  25. tShopfas.setData({
  26. margintop: py - d.starty
  27. })
  28. }
  29. },
  30. scrollTouchend:function(e){
  31. let d = tShopfas.data;
  32. if(d.endy-d.starty >100 && d.scrollindex>0){
  33. tShopfas.setData({
  34. scrollindex: d.scrollindex-1
  35. })
  36. }else if(d.endy-d.starty
  37. tShopfas.setData({
  38. scrollindex: d.scrollindex+1
  39. })
  40. }
  41. tShopfas.setData({
  42. starty:0,
  43. endy:0,
  44. margintop:0
  45. })
  46. },
  47. })

第二部分：如何开通一个小商店

****更多行业产品开发方案，请关注 加速度****

<以上资讯仅供参考，如需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询获取产品开发方案和报价>

小程序开发 小程序商城 微信小程序
微信客服二维码

加客服微信获取更多内容

返回文章列表