177-371-24501(同微信)

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

2022-04-21 管理员


微信小程序全屏动画滚动


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

 
上一篇：制作餐饮微信小程序,餐饮行业开发小程序好处
下一篇：小程序获取微信运动,微信小程序和微信运动打通
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
快速提升网站排名的方法
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话（微信同号）

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持：酷微科技

电话咨询 在线咨询 服务项目 SEO优化