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


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高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
javascript基本语法
May 31 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
解决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代码DOS造成用光网络带宽
2011/03/01 PHP
php生成略缩图代码
2012/07/16 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Yii全局函数用法示例
2017/01/22 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
javascript如何创建对象
2016/08/29 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
用vue写一个日历
2020/11/02 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python中取绝对值简单方法总结
2020/07/24 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
教师节促销活动方案
2014/02/14 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年资料员工作总结
2014/11/18 职场文书
计算机教师工作总结
2015/08/13 职场文书