微信小程序之判断页面滚动方向的示例代码
2018-08-30 10:50
573 查看
微信小程序中如果判断页面滚动方向?
解决方案
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序左右滑动切换页面示例代码--转载
- 微信小程序之页面拦截器的示例代码
- C#判断程序是否是管理员权限运行的方法代码示例
- 微信小程序表单组件picker-view(嵌入页面的滚动选择器)
- 微信小程序调转指定页面代码
- 基于JavaEE——微信网页(四)微信的程序接入 (代码--模拟示例)
- 微信小程序之禁止ios页面下拉下滑滚动 出现空白的情况
- 判断页面鼠标滚动的方向
- 微信小程序和微信小程序之间的跳转和传参示例代码附讲解
- java实现微信小程序登录态维护的示例代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 微信小程序商品详情页规格属性选择示例代码
- 微信小程序scroll-view横向滑动嵌套for循环的示例代码
- 微信小程序实战篇之购物车的实现代码示例
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 微信小程序 判断手机号的实现代码
- Java代码实现微信页面滚动防露底(核心代码)
- 【Android】ListView监听上下滑动(设置滚动监听判断ListView的滚动方向同时获取屏幕高度、ListView实际高度,判断是否需要展示返回顶部按钮(具体逻辑请看代码--附有详细注释)。
- 前端开发---微信小程序中的页面代码中的模板的封装