微信小程式功能之全屏滾動效果的實現程式碼

佚名發表於2018-12-04
微信小程式
最近小編做專案遇到這樣的需求，要求實現一個全屏滾動的效果，在網上找了例項程式碼，但是不是很完美，小編又結合自己的知識給大家補充下，對微信小程式全屏滾動效果的例項程式碼感興趣的朋友參考下本文吧

想做一個全屏滾動的效果，於是在網上找了一個差不多的例子，但是覺得有些地方不是很好，於是改進了一下；

先給大家展示下效果圖，感覺不錯，請參考例項程式碼。

程式碼：

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

總結

以上所述是小編給大家介紹的微信小程式功能之全屏滾動效果的實現程式碼，希望對大家有所幫助，也非常感謝大家的支援！

相關文章