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

北极の风 2018-12-04 21:09:55 来源: 愫幕
最近小编做项目遇到这样的需求，要求实现一个全屏滚动的效果，在网上找了实例代码，但是不是很完美，小编又结合自己的知识给大家补充下，对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧

想做一个全屏滚动的效果，于是在网上找了一个差不多的例子，但是觉得有些地方不是很好，于是改进了一下；

先给大家展示下效果图，感觉不错，请参考实例代码。

代码：

wxml:　

  1. <!-- 第一页 -- >
  2. 　　<view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
  3.       <view class='cont'>
  4.         <view class='cont-body'>
  5.           <view>one</view>
  6.         </view>
  7.       </view>
  8.     </view>
  9.     <!-- 第二页 -->
  10.     <view id='hook2' class="section section02 {{scrollindex==1?'active':''}}" style='background:pink' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
  11.       <view class='cont'>
  12.         <view class='cont-body'>
  13.           <view>two</view>
  14.         </view>
  15.       </view>
  16.     </view>
  17.     <!-- 第三页 -->
  18.     <view id='hook3' class="section section03 {{scrollindex==2?'active':''}}" style='background:blue' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
  19.       <view class='cont'>
  20.         <view class='cont-body'>
  21.           <view>three</view>
  22.         </view>
  23.       </view>
  24.     </view>
  25.     <!-- 第四页 -->
  26.     <view id='hook4' class="section section04 {{scrollindex==3?'active':''}}" style='background:green' bindtouchstart="scrollTouchStart" bindtouchmove='scrollTouchMove' bindtouchend="scrollTouchEnd">
  27.       <view class='cont'>
  28.         <view class='cont-body'>
  29.           <view>foure</view>
  30.         </view>
  31.       </view>
  32.     </view>

wxss:

  1. page {
  2.   height: 100%;
  3.   background: fff;
  4.   color: #282828;
  5. }
  6. .container {
  7.   flex: 1;
  8.   flex-direction: column;
  9.   box-sizing: border-box;
  10.   padding: 0;
  11.   align-items: initial;
  12.   justify-content: first baseline;
  13. }
  14. .container-fill {
  15.   height: 100%;
  16.   overflow: hidden;
  17. }
  18. .scroll-fullpage {
  19.   height: 100%;
  20. }
  21. .section {
  22.   height: 100%;
  23. }
  24. .cont {
  25.   width: 100%;
  26.   height: 100%;
  27.   margin: 0 auto;
  28.   position: relative;
  29. }
  30. .cont .cont-body {
  31.   width: 75%;
  32.   position: absolute;
  33.   left: 50%;
  34.   top: 50%;
  35.   transform: translate(-50%, -50%);
  36. }

js:

  1. Page({
  2.   /**
  3.    * 页面的初始数据
  4.    */
  5.   data: {
  6.     　 scrollindex: 0, // 当前页面的索引值
  7.     　　　　totalnum: 4, // 总共页面数
  8.     　　　　starty: 0, // 开始的位置x
  9.     　　　　startTime: 0,  // 开始的时间戳
  10.     　　　　endy: 0, // 结束的位置y
  11.     　　　　endTime: 0,  // 结束的时间戳
  12.     　　　　critical: 80, // 触发翻页的临界值
  13.     　　　　maxTimeCritical: 300,  // 滑动的时间戳临界值上限
  14.     　　　　minTimeCritical: 100,  // 滑动的时间戳临界值下限
  15.     　　　　margintop: 0, // 滑动下拉距离
  16.     　 currentTarget: null,  // 当前点击的元素的id
  17.   },
  18.   scrollTouchStart: function(e) {
  19.     let py = e.touches[0].pageY,
  20.       stamp = e.timeStamp,
  21.       currentTarget = e.currentTarget.id;
  22.     console.log(py);
  23.     this.setData({
  24.       starty: py,
  25.       startTime: stamp,
  26.       currentTarget: currentTarget
  27.     })
  28.   },
  29.   scrollTouchMove(e) {
  30.     // console.log(e);
  31.   },
  32.   scrollTouchEnd: function(e) {
  33.     let py = e.changedTouches[0].pageY,
  34.       stamp = e.timeStamp,
  35.       d = this.data,
  36.       timeStampdiffer = stamp - d.startTime;
  37.     this.setData({
  38.       endy: py,
  39.       endTime: stamp
  40.     })
  41.     console.log('开始：' + d.starty, '结束：' + e.changedTouches[0].pageY);
  42.     console.log('时间戳之差: ' + timeStampdiffer);
  43.     if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty > e.changedTouches[0].pageY)) {
  44.       let currentTarget = parseInt(d.currentTarget.slice(4)),
  45.         nextTarget = currentTarget + 1;
  46.       const query = wx.createSelectorQuery();
  47.       query.select(`#hook${nextTarget}`).boundingClientRect();
  48.       query.selectViewport().scrollOffset();
  49.       query.exec(function (res) {
  50.         // console.log(res);
  51.         　　 　　if (res[0] != null) {
  52.           wx.pageScrollTo({
  53.             scrollTop: res[0].height * currentTarget,
  54.           })
  55.         }
  56.       })
  57.     　　} else if (timeStampdiffer <= d.maxTimeCritical && timeStampdiffer > d.minTimeCritical && (d.starty < e.changedTouches[0].pageY)) {  // 下拉
  58.       let currentTarget = parseInt(d.currentTarget.slice(4)),
  59.         preTarget = currentTarget - 2 == -1 ? 0 : currentTarget - 2;
  60.       　　const query = wx.createSelectorQuery();
  61.       　　query.select(`#hook1`).boundingClientRect();
  62.       　　query.selectViewport().scrollOffset();
  63.       　　query.exec(function (res) {
  64.         　　console.log(res);
  65.         　　wx.pageScrollTo({
  66.           　　scrollTop: res[0].height * preTarget
  67.         　　})
  68.       　　})
  69.     　　}   
  70.   　},
  71. })

总结

以上所述是小编给大家介绍的微信小程序功能之全屏滚动效果的实现代码，希望对大家有所帮助，也非常感谢大家的支持！

微信小程序滚动效果编程开发