欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年11月22日 10:11:39   作者：愫幕  
最近小編做項(xiàng)目遇到這樣的需求，要求實(shí)現(xiàn)一個全屏滾動的效果，在網(wǎng)上找了實(shí)例代碼，但是不是很完美，小編又結(jié)合自己的知識給大家補(bǔ)充下，對微信小程序全屏滾動效果的實(shí)例代碼感興趣的朋友參考下本文吧

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

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

代碼：

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)前點(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('時間戳之差: ' + 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é)

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

相關(guān)文章

最新評論