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


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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
vue prop传值类型检验方式
Jul 30 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue实现简单图片上传
2020/06/30 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
5种Python单例模式的实现方式
2016/01/14 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
兼职学生的自我评价
2013/11/24 职场文书
简历里的自我评价范文
2014/02/24 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
客房部经理岗位职责
2015/02/02 职场文书
公司员工手册范本
2015/05/14 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
会议简讯范文
2015/07/20 职场文书
css3 选择器
2022/05/11 HTML / CSS