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


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 巧妙去除数组中的重复项
Jan 25 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
JavaScript控制台的更多功能
Apr 28 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 之Section与Cookie使用总结
2012/09/14 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python实战教程之自动扫雷
2018/07/13 Python
python实现文件的分割与合并
2019/08/29 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
护理专业推荐信
2013/11/07 职场文书
静心口服夜广告词
2014/03/20 职场文书
白血病募捐倡议书
2014/05/14 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014年教育工作总结
2014/11/26 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
LeetCode189轮转数组python示例
2022/08/05 Python