溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-25 00:18:05 來源：腳本之家 閱讀：412 作者：愫幕 欄目：web開發(fā)

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

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

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

代碼：

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,  // 開始的時(shí)間戳
    　　　　endy: 0, // 結(jié)束的位置y
    　　　　endTime: 0,  // 結(jié)束的時(shí)間戳
    　　　　critical: 80, // 觸發(fā)翻頁的臨界值
    　　　　maxTimeCritical: 300,  // 滑動(dòng)的時(shí)間戳臨界值上限
    　　　　minTimeCritical: 100,  // 滑動(dòng)的時(shí)間戳臨界值下限
    　　　　margintop: 0, // 滑動(dòng)下拉距離
    　 currentTarget: null,  // 當(dāng)前點(diǎn)擊的元素的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('時(shí)間戳之差: ' + 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é)

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手