微信小程序功能之全屏滚动效果的实现代码

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

最近小编做项目遇到这样的需求，要求实现一个全屏滚动的效果，在网上找了实例代码，但是不是很完美，小编又结合自己的知识给大家补充下，对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧

想做一个全屏滚动的效果，于是在网上找了一个差不多的例子，但是觉得有些地方不是很好，于是改进了一下；

先给大家展示下效果图，感觉不错，请参考实例代码。

代码：

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({
  /**
   * 页面的初始数据
   */
  data: {
    　 scrollindex: 0, // 当前页面的索引值
    　　　　totalnum: 4, // 总共页面数
    　　　　starty: 0, // 开始的位置x
    　　　　startTime: 0,  // 开始的时间戳
    　　　　endy: 0, // 结束的位置y
    　　　　endTime: 0,  // 结束的时间戳
    　　　　critical: 80, // 触发翻页的临界值
    　　　　maxTimeCritical: 300,  // 滑动的时间戳临界值上限
    　　　　minTimeCritical: 100,  // 滑动的时间戳临界值下限
    　　　　margintop: 0, // 滑动下拉距离
    　 currentTarget: null,  // 当前点击的元素的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, '结束：' + 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
        　　})
      　　})
    　　}    
  　},
})

总结

以上所述是小编给大家介绍的微信小程序功能之全屏滚动效果的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

微信小程序全屏滚动字幕的实现方法详解

JS定义网页表单提交（submit）的方法
这篇文章主要介绍了JS定义网页表单提交（submit）的方法,实例分析了javascript实现表单提交执行自定义函数的方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
利用JavaScript获取用户IP属地方法详解
最近很多平台都上线了显示用户的位置信息的功能，那么这是如何做到的，据说这个位置信息的准确性在通信网络运营商那里？本文将来探究一下
2022-05-05
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下
2015-03-03
Three.js如何实现雾化效果示例代码
雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了关于Three.js如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
微信小程序自定义底部弹出框功能
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
鼠标放在图片上显示大图的JS代码
将图片查询出来之后，还需要加一个查看大图的功能，于是就用js写了一个方法，然后在image的onmouseover事件中调用此方法，这样在鼠标悬浮在小图上面的时候，其大图就会自动的显示出来。
2013-03-03
javascript实现动态导入js与css等静态资源文件的方法
这篇文章主要介绍了javascript实现动态导入js与css等静态资源文件的方法,基于回调函数实现该功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
浅析js中的every()对空数组总返回true
JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式,本文就来和大家一起讨论下为什么JS中的 every()对空数组总返回 true,需要的可以参考下
2023-09-09
利用ES6实现单例模式及其应用详解
单例是在程序设计非常基础的东西，这篇文章主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-12-12
检测用户按键
检测用户按键...
2006-07-07

微信小程序功能之全屏滚动效果的实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具