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


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 可以拖动的DIV(二)
Jun 26 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
JavaScript find()方法及返回数据实例
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
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
ECMAScript 创建自己的js类库
2012/11/22 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python实现微信自动回复功能
2018/04/11 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
小学教师办公室制度
2014/02/03 职场文书
公司寄语大全
2014/04/10 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python