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

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

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

代碼：

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

總結

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