全屏竖向滚动（小程序）

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