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


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 cookie解码函数(兼容ff)
Mar 17 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
vue.js实现简单购物车功能
May 30 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
React列表栏及购物车组件使用详解
Jun 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
Javascript的this用法
2017/01/16 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
js+css实现打字效果
2020/06/24 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python