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

2024-10-22 02:43:35

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

解决方案

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序-滚动消息通知的实例代码

写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... wxml <s
微信小程序数字滚动插件使用详解

用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co
微信小程序之滚动视图容器的实现方法

微信小程序之滚动视图容器的实现方法直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view> wxss: .con
微信小程序scroll-view实现字幕滚动

本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:字幕滚动通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动. wxml: <scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{s
微信小程序滚动Tab实现左右可滑动切换

微信小程序滚动Tab实现左右可滑动切换效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current
微信小程序实现滚动消息通知

本文实例为大家分享了微信小程序实现滚动消息的具体代码,供大家参考,具体内容如下效果图: index.wxml  <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for=&quo
微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序-横向滑动scroll-view隐藏滚动条

wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><
微信小程序之判断页面滚动方向的示例代码

微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度  <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}
微信小程序弹窗禁止页面滚动的实现代码

下面给大家介绍下小程序弹窗禁止页面滚动的效果: 在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove&quo
微信小程序和H5页面间相互跳转代码实例

这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是要打开的小程序 appId * path string 否打开的页面路径,如果为空则打开首页 * extraData object 否需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A
微信小程序商品详情页规格属性选择示例代码

detail.wxml展示页面  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &
微信小程序实现幸运大转盘功能的示例代码

目录一.项目展示二.抽奖页三.领奖页一.项目展示幸运大转盘是一个简单的抽奖小程序参与用户点击抽奖便可抽取轮盘的奖品二.抽奖页抽奖页是一个大轮盘和活动规则页面形式简单主要核心在于轮盘核心代码[轮盘旋转]如下: getLottery: function () { var that = this var awardIndex = Math.random() * 6 >>> 0; // 获取奖品配置 var awardsConfig = app.awardsConfig,
C#获取微信小程序的云数据库中数据的示例代码

目录 0 背景说明 0.1 获取AccessToken 0.2 数据库查询 0.3 文件下载 2. 简单的封装 3. 简单测试 4. 参考文档 0 背景说明试水小程序,实现访客登记,现有.NET程序需要获取该小程序的数据 0.1 获取AccessToken 调用绝大多数后台接口时都需使用 access_token 参考小程序文档:auth.getAccessToken 发送Get请求,获取AccessToken 接口: https://api.weixin.qq.com/cgi-bin/tok
微信小程序实现卡片左右滑动效果的示例代码

快放假了,人狠话不多,啥也不说了.先看效果图. 思路从上面的效果图来看,基本的需求包括: 左右滑动到一定的距离,就向相应的方向移动一个卡片的位置. 卡片滑动的时候有一定的加速度. 如果滑动距离太小,则依旧停留在当前卡片,而且有一个回弹的效果. 看到这样的需求,不熟悉小程序的同学,可能感觉有点麻烦.首先需要计算卡片的位置,然后再设置滚动条的位置,使其滚动到指定的位置,而且在滚动的过程中,加上一点加速度... 然而,当你查看了小程序的开发文档之后,就会发现小程序已经帮我们提前写好了,我们只要做相关
微信小程序实现图片懒加载的示例代码

本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片(默认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度. 多图片懒加载 1.xml页面 <block wx:for="{{list}}" wx:key=""> <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode=
微信小程序中实现手指缩放图片的示例代码

公司开发微信小程序,pm想实现如下需求: 用手指缩放图片.其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api.wx.previewImage,就是它.预览图片.除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅.下面就说说如何用js来实现这个功能吧. 先上源码,然后在逐步剖析: Page({ data: { touch: { distance: 0
微信小程序实现购物页面左右联动

本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下效果图: wxml <view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}"> <view class="

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

相关推荐

随机推荐