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

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

10年积累的网站设计、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有庄浪免费网站建设让你可以放心的选择与我们合作。

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

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

代码：

wxml:　

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
        　　})
      　　})
    　　}    
  　},
})

总结

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

文章标题：微信小程序功能之全屏滚动效果的实现代码
本文地址：http://azwzsj.com/article/pchooh.html

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

其他资讯