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

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

先给大家展示下效果图

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

wxml

<view class="swiper-cont container-fill"> 
  <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px"> 
  <!-- 第一页 -->
    <view class="section section01 {{scrollindex==0?'active':''}}" style='background:red'> 
      <view class='cont'>
        <view class='cont-body'>
          <view>one</view>
        </view>
      </view>
    </view> 
  <!-- 第二页 -->
    <view class="section section02 {{scrollindex==1?'active':''}}" style='background:pink'> 
      <view class='cont'>
        <view class='cont-body'>
          <view>two</view>
        </view>
      </view>
    </view> 
  <!-- 第三页 -->
    <view class="section section03 {{scrollindex==2?'active':''}}" style='background:blue'>  
      <view class='cont'>
        <view class='cont-body'>
          <view>three</view>
        </view>
      </view>
    </view>
  <!-- 第四页 -->
    <view class="section section04 {{scrollindex==3?'active':''}}" style='background:green'> 
      <view class='cont'>
        <view class='cont-body'>
          <view>foure</view>
        </view>
      </view>
    </view>
  </view> 
</view> 

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

总结

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

作者微信：欢迎大家交流