微信小程序功能之全屏滚动效果的实现代码

<!-- 第一页 -- >　　<view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">      <view class='cont'>        <view class='cont-body'>          <view>one</view>        </view>      </view>    </view>    <!-- 第二页 -->    <view id='hook2' class="section section02 {{scrollindex==1?'active':''}}" style='background:pink' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">      <view class='cont'>        <view class='cont-body'>          <view>two</view>        </view>      </view>    </view>    <!-- 第三页 -->    <view id='hook3' class="section section03 {{scrollindex==2?'active':''}}" style='background:blue' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">      <view class='cont'>        <view class='cont-body'>          <view>three</view>        </view>      </view>    </view>    <!-- 第四页 -->    <view id='hook4' class="section section04 {{scrollindex==3?'active':''}}" style='background:green' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">      <view class='cont'>        <view class='cont-body'>          <view>foure</view>        </view>      </view>    </view>

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

Page({  /**   * 页面的初始数据   */  data: {    　 scrollindex: 0, // 当前页面的索引值    　　　　totalnum: 4, // 总共页面数    　　　　starty: 0, // 开始的位置x    　　　　startTime: 0,  // 开始的时间戳    　　　　endy: 0, // 结束的位置y    　　　　endTime: 0,  // 结束的时间戳    　　　　critical: 80, // 触发翻页的临界值    　　　　maxTimeCritical: 300,  // 滑动的时间戳临界值上限    　　　　minTimeCritical: 100,  // 滑动的时间戳临界值下限    　　　　margintop: 0, // 滑动下拉距离    　 currentTarget: null,  // 当前点击的元素的id  },  scrollTouchStart: function(e) {    let py = e.touches[0].pageY,      stamp = e.timeStamp,      currentTarget = e.currentTarget.id;    console.log(py);    this.setData({      starty: py,      startTime: stamp,      currentTarget: currentTarget    })  },  scrollTouchMove(e) {    // console.log(e);  },  scrollTouchEnd: function(e) {    let py = e.changedTouches[0].pageY,      stamp = e.timeStamp,      d = this.data,      timeStampdiffer = stamp - d.startTime;    this.setData({      endy: py,      endTime: stamp    })    console.log('开始：' + d.starty, '结束：' + e.changedTouches[0].pageY);    console.log('时间戳之差: ' + timeStampdiffer);    if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty > e.changedTouches[0].pageY)) {      let currentTarget = parseInt(d.currentTarget.slice(4)),        nextTarget = currentTarget + 1;      const query = wx.createSelectorQuery();      query.select(`#hook${nextTarget}`).boundingClientRect();      query.selectViewport().scrollOffset();      query.exec(function (res) {        // console.log(res);        　　 　　if (res[0] != null) {          wx.pageScrollTo({            scrollTop: res[0].height * currentTarget,          })        }      })    　　} else if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty < e.changedTouches[0].pageY)) {  // 下拉      let currentTarget = parseInt(d.currentTarget.slice(4)),        preTarget = currentTarget - 2 == -1 ? 0 : currentTarget - 2;      　　const query = wx.createSelectorQuery();      　　query.select(`#hook1`).boundingClientRect();      　　query.selectViewport().scrollOffset();      　　query.exec(function (res) {        　　console.log(res);        　　wx.pageScrollTo({          　　scrollTop: res[0].height * preTarget        　　})      　　})    　　}      　},})