最近小編做項(xiàng)目遇到這樣的需求，要求實(shí)現(xiàn)一個(gè)全屏滾動(dòng)的效果，在網(wǎng)上找了實(shí)例代碼，但是不是很完美，小編又結(jié)合自己的知識(shí)給大家補(bǔ)充下，對(duì)微信小程序全屏滾動(dòng)效果的實(shí)例代碼感興趣的朋友參考下本文吧

想做一個(gè)全屏滾動(dòng)的效果，于是在網(wǎng)上找了一個(gè)差不多的例子，但是覺得有些地方不是很好，于是改進(jìn)了一下；

先給大家展示下效果圖，感覺不錯(cuò)，請(qǐng)參考實(shí)例代碼。

代碼：

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.    * 頁面的初始數(shù)據(jù)
4.    */
5.   data: {
6.     　 scrollindex: 0, // 當(dāng)前頁面的索引值
7.     　　　　totalnum: 4, // 總共頁面數(shù)
8.     　　　　starty: 0, // 開始的位置x
9.     　　　　startTime: 0,  // 開始的時(shí)間戳
10.     　　　　endy: 0, // 結(jié)束的位置y
11.     　　　　endTime: 0,  // 結(jié)束的時(shí)間戳
12.     　　　　critical: 80, // 觸發(fā)翻頁的臨界值
13.     　　　　maxTimeCritical: 300,  // 滑動(dòng)的時(shí)間戳臨界值上限
14.     　　　　minTimeCritical: 100,  // 滑動(dòng)的時(shí)間戳臨界值下限
15.     　　　　margintop: 0, // 滑動(dòng)下拉距離
16.     　 currentTarget: null,  // 當(dāng)前點(diǎn)擊的元素的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, '結(jié)束：' + e.changedTouches[0].pageY);
42.     console.log('時(shí)間戳之差: ' + 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. })

總結(jié)

以上所述是小編給大家介紹的微信小程序功能之全屏滾動(dòng)效果的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，也非常感謝大家的支持！