微信小程序功能之全屏滾動效果的實現(xiàn)代碼

更新時間：2018年11月22日 10:11:39 作者：愫幕

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

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

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

代碼：

wxml:　

<!-- 第一頁 -- >
　　<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>

wxss:

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

js:

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    　 scrollindex: 0, // 當(dāng)前頁面的索引值
    　　　　totalnum: 4, // 總共頁面數(shù)
    　　　　starty: 0, // 開始的位置x
    　　　　startTime: 0,  // 開始的時間戳
    　　　　endy: 0, // 結(jié)束的位置y
    　　　　endTime: 0,  // 結(jié)束的時間戳
    　　　　critical: 80, // 觸發(fā)翻頁的臨界值
    　　　　maxTimeCritical: 300,  // 滑動的時間戳臨界值上限
    　　　　minTimeCritical: 100,  // 滑動的時間戳臨界值下限
    　　　　margintop: 0, // 滑動下拉距離
    　 currentTarget: null,  // 當(dāng)前點擊的元素的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, '結(jié)束：' + 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
        　　})
      　　})
    　　}    
  　},
})

總結(jié)

以上所述是小編給大家介紹的微信小程序功能之全屏滾動效果的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: