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


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 相关文章推荐
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
Angular.JS中的this指向详解
May 17 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue 扩展现有组件的操作
Aug 14 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内核探索:变量概述
2014/01/30 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
javascript基本语法
2016/05/31 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
数字天堂软件测试面试题
2012/12/23 面试题
教师年终个人自我评价
2013/10/04 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
2015年复活节活动总结
2015/02/27 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
入党团支部推荐意见
2015/06/02 职场文书
投诉书格式范本
2015/07/02 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
CSS基础详解
2021/10/16 HTML / CSS