微信小程序之判断页面滚动方向的示例代码


Posted in Javascript onAugust 30, 2018

微信小程序中如果判断页面滚动方向?

解决方案

1.用到微信小程序API

获取页面实际高度 nodesRef.boundingClientRect([callback])

监听用户滑动页面事件onPageScroll。

2.获取页面实际高度

<!--WXML-->
<view id="box">
  <view class="list" wx:for="{{List}}" wx:key="List{{index}}">
    <image mode='aspectFill' class='list_img' src="{{item.imgUrl}}" ></image>
  </view>
</view>
/* JS */
 // 封装函数获取ID为box的元素实际高度 
 getScrollHeight: function() {
  wx.createSelectorQuery().select('#box').boundingClientRect((rect) => {
   this.setData({
    scrollHeight: rect.height
   })
   console.log(this.data.scrollHeight)
  }).exec()
 },
 // 假设数据请求
 getDataList: function() {
  wx.request({
   url: 'test.php', //仅为示例,并非真实的接口地址
   success: function(res) {
   // 如果该元素下面的数据是动态获取的,此方法在wx.request请求成功的回调函数中调用
    this.getScrollHeight()
   }
  })
 },

3.监听用户滑动页面事件

//监听用户滑动页面事件
 onPageScroll: function(e) {
  
  if (e.scrollTop <= 0) {
   // 滚动到最顶部
   e.scrollTop = 0;
  } else if (e.scrollTop > this.data.scrollHeight) {
   // 滚动到最底部
   e.scrollTop = this.data.scrollHeight;
  }
  if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
   //向下滚动 
   console.log('向下 ', this.data.scrollHeight)
  } else {
   //向上滚动 
   console.log('向上滚动 ', this.data.scrollHeight)
  }
  //给scrollTop重新赋值 
  this.setData({
   scrollTop: e.scrollTop
  })
 },

PS:微信小程序滚动到某个位置改变效果

<scroll-view>
<view>Some of the words<view>
<view bindscroll="scroll" class="{{variable>200 ? 'class1' : 'class2'}}"</view>
</scroll-view>
//JS文件
 //滚动监听
 scroll: function (e) {
 this.setData({
  scrollTop:e.detail.scrollTop
 })
 }

其中,variable为全局变量,class1、class2即为相应的css

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
javascript对象的相关操作小结
May 16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
You might like
php md5下16位和32位的实现代码
2008/04/09 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python 线程池用法简单示例
2019/10/02 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
企业出纳岗位职责
2014/03/12 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
护理实习生带教计划
2015/01/16 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL