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


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 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
js加解密 脚本解密
Feb 22 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
jquery实现图片轮播器
May 23 jQuery
node通过express搭建自己的服务器
Sep 30 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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+MySQL 制作简单的留言本
2009/11/02 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
JS实现图片切换特效
2019/12/23 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
小程序自动化测试的示例代码
2020/08/11 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
如何写新闻稿
2015/07/18 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL