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


Posted in Javascript onNovember 22, 2018

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

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

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

代码:

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

总结

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

Javascript 相关文章推荐
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 #Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 #Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 #Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 #Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 #Javascript
You might like
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
vue实现购物车列表
2020/06/30 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
详解重置Django migration的常见方式
2019/02/15 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
基于python3的socket聊天编程
2020/02/17 Python
python实现拼接图片
2020/03/23 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
大专生自荐信
2013/10/04 职场文书
社区工作者先进事迹
2014/01/18 职场文书
销售经理工作检讨书
2015/02/19 职场文书
百家讲坛观后感
2015/06/12 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python