会员中心

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



微信小程序全屏动画滚动


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

 
上一篇 微信小程序解决方案,微信公众号小程序开发并不难 下一篇 制作餐饮微信小程序,餐饮行业开发小程序好处
论坛资讯同步说明，本文同步自论坛：bbs.miaozhizuo.com，如您在论坛注册成为会员用户并且发帖，则默认论坛文章同步协议，协议内容请移步论坛查看！

          在线客服

            点击这里给我发消息

          VIP咨询
         点击这里给我发消息

          咨询热线

   17080039991

      (免费拨打)

          代理招商

   178-9531-8531

[关闭]
随手APP微信

官方微信自助客服

[关闭]