微信小程序垂直方向上全屏滚动效果的代码实现demo(类似微视、抖音效果)

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

先给大家展示下效果图

话不多说，直接上代码，下面的代码是我亲测有效

wxml

 
   
  
     
      
        
          one
        
      
     
  
     
      
        
          two
        
      
     
  
      
      
        
          three
        
      
    
  
     
      
        
          foure
        
      
    
   
 

wxss

page{
	height: 100%;
	background: fff;
	color: #282828;
}
.container {
	flex: 1;
  flex-direction: column;
 	box-sizing: border-box;
  padding: 0;
  align-items:initial;
  justify-content:first baseline;
}
.container-fill{
	height: 100%;
	overflow: hidden;
}
.scroll-fullpage{
	height: 100%;
}
.section{
	height: 100%;
}
.active .cont {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.cont{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.cont .cont-body {
  width: 75%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    scrollindex: 0,  //当前页面的索引值
    totalnum: 4,  //总共页面数
    starty: 0,  //开始的位置x
    endy: 0, //结束的位置y
    critical: 80, //触发翻页的临界值
    margintop: 0,  //滑动下拉距离
  },
  scrollTouchstart: function (e) {
    let py = e.touches[0].pageY;
    console.log(py);
    this.setData({
      starty: py
    })
  },
  scrollTouchend: function (e) {
    let py = e.changedTouches[0].pageY;
    let d = this.data;
    this.setData({
      endy: py,
    })
    console.log(e.changedTouches[0].pageY, d.starty);
    if (py - d.starty > d.critical && d.scrollindex > 0) {
      this.setData({
        scrollindex: d.scrollindex - 1
      })
    } else if (py - d.starty < -(d.critical) && d.scrollindex < this.data.totalnum - 1) {
      this.setData({
        scrollindex: d.scrollindex + 1
      })
    }
    this.setData({
      starty: 0,
      endy: 0,
      margintop: 0
    })
  },
})

总结

以上所述是我给大家介绍的微信小程序垂直方向上全屏滚动效果的代码实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。转载请附上源码地址!

作者微信：欢迎大家交流