小程序使用了scroll-view滚动组件时,如何判断滚动的方向

微信小程序 上下左右滑动 微信小程序支持taughtstart,taughtmove,taughtend事件,通过调用这几个事件,判断手指的位置,通过位置的差值来判断手指是怎么滑动的,把事件绑定在一个容器上,设定这个容器的大小,就可以在容器内划动,然后判断其划动方向。 <view class="contentContainer" bindtouchmove="handletouchmove" bindtouchs... 阅读详情

scroll-view组件里的属性bindscroll。
链接: bindscroll.
在这里插入图片描述

//wxml
<scroll-view scroll-y bindscroll="bindscrollfx" class="videoList">
		//内容
</scroll-view>
// js
//判断上下滚动方向)(deltaY小于0时,向下,向上则反之)
  bindscrollfx: function (e) {
    var that = this;
    console.log(e.detail.deltaY);
    var scrollfx=e.detail.deltaY;
    if(scrollfx<0){
      that.setData({
        istrue_scroll:false  //向下滚动
      })
    }else{
      that.setData({
        istrue_scroll:true
      })
    }         
  },
【微信小程序】wxs页面手指上下滑动范围与盒子左右移动关联 使用场景:要求页面在滑动到一定范围时,如果出现横向盒子列表,则在靠近这个横向盒子列表时,列表会根据当前页面手指上下滑动的范围去实时控制这个横向盒子左右移动,通过这种方式来提示用户此处可以左右滑动。 阅读详情

相关推荐

使用scroll-view实现组件滚动(无法显示滚动组件的原因之一)

**竖向滚动** 源代码: <!--pages/scroll-view/lab1.wxml--> <!-- 允许组件滚动 --> <scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view> /* pages/scroll-view/l

weixin_49218184的博客 1041

微信小程序——监听页面滑动(二)判断用户在做向上滑动还是向下滑动(onScrollPage scroll-view)

手把手教你通过监听页面滑动判断用户是在上滑还是在下滑

XSL_HR的博客 6684

微信小程序scroll-view优化:解决input和textarea滚动时placeholder飘移问题

本文详细解析了微信小程序中scroll-view优化input和textarea滚动时placeholder飘移问题的解决方案。通过替换普通view为scroll-view并设置min-height:100vh,有效解决了输入框内容偏移问题,提升用户体验。文章还对比了其他替代方案,并深入探讨了scroll-view的工作原理及优化建议,为开发者提供实用参考。

weixin_29009081的博客 290

微信小程序之滑动事件以及事件冒泡

微信小程序点击、双击、长按事件可参考https://blog.youkuaiyun.com/qq_40477864/article/details/89159381 一、滑动事件 微信小程序的滑动事件是通过bindtouchmove实现的,通过比较滑动事件前后的坐标判断滑动方向,这里只给出了简单的左右滑动。 wxml: <!--index.wxml--> <view class=...

qq_40477864的博客 3086

避坑指南:微信小程序scroll-view动态高度计算的那些雷区

本文深入剖析了微信小程序中scroll-view组件动态高度计算的常见问题与解决方案。针对CSS Flex布局的兼容性陷阱、JS动态计算的异步时机错误以及自定义导航栏与安全区域带来的高度计算难题,提供了详细的避坑指南和实战代码,帮助开发者实现精准的scroll-view高度自适应。

zz67890的博客 1054

生物信息学新手必看:MAFFT多序列比对从安装到实战(附参数优化技巧)

本文为生物信息学新手提供了MAFFT多序列比对工具的完整指南。从Linux环境下的安装部署,到核心算法策略(如FFT-NS-i、L-INS-i)的选择逻辑,再到空位罚分等关键参数的深度解析与优化技巧,手把手教你完成从原始序列到高质量比对结果的实战流程,为后续进化树构建等分析奠定坚实基础。

weixin_29230773的博客 483

小程序监测滑动方向

1、在需要监测的盒子中添加事件(wxml) <view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd"> 2、在当前文件js中的data对象中声明两个数组(js/data) touchS : [0,0], touchE : [0,0], 3、事件监听 // 触摸开始事件 touchStart: function(e){ // console.log(e.touches[0]

weixin_49333876的博客 413

STC8单片机高精度EV1527解码实战:定时器捕获+状态机抗干扰方案

EV1527是一种广泛应用于433MHz无线遥控的曼彻斯特编码协议,其核心在于对脉宽时序(如同步头、逻辑0/1)的微秒级精确识别。传统外部中断+延时判别方式受MCU中断延迟、编译优化及环境噪声影响,极易导致误码;而基于硬件定时器输入捕获的解码方案,将时间测量交由硬件完成,显著提升时序鲁棒性与温度/电压适应性。该技术适用于STC8等无专用无线解码外设的8位单片机,在智能开关、晾衣架、车库门控等IoT终端中实现低至0.003%的稳定误码率。本文聚焦STC8H系列利用T1定时器下降沿捕获与有限状态机协同解码EV1

weixin_29188997的博客 180

小程序滚动组件,左边导航栏与右边内容联动效果实现

最近公司要开发小程序,趁着ui还没出来,先把一些功能实现一下。其中有一个功能,需要左边的导航栏和右边的内容对应联动,其实就想饿了么外卖的选单界面,但是在小程序里实现又有点不同了。最终效果如图(丑是丑了点,关注功能就好)右边内容容器是可以滚动的,可以使用小程序提供的scroll-view组件,要强调的是,必须给节点设置高度滚动的问题好解决,那么联动呢?我们需要的联动必须是左右相互的,即点击导航栏,内...

donggua_123的博客 3万+

GAN网络详解析

介绍目前常见的GAN网络,以及GAN网络的基本组成

wm199的博客 6504

智能车浅谈——手把手让车跑起来(电磁篇)

手把手让你的电磁车上路。

qq_41954556的博客 7万+

【uniapp】小程序开发8:滚动组件scroll-view

我们经常需要做页面中部分内容可以滚动的功能,例如“猜你喜欢”,内容太多,通常都会超出屏幕,那么此块区域应该可以滚动,但是顶部的自定义导航栏应该不能随着滚动。 这个时候,就可以使用uniapp提供的滚动组件scroll-view。

不积跬步无以至千里,不积小流无以成江海。一个喜欢学习分享的程序员 7964

游戏大厂射击游戏无缝大世界游戏DS服务器架构设计方案详解

摘要: 本文深入解析游戏大厂无缝大世界射击游戏的分布式服务器(DS)架构设计方案。以《和平精英》《量子特攻》为例,阐述如何通过动态分区、兴趣管理、弹性扩缩等核心技术应对高并发、低延迟、无缝切换等挑战。架构分为世界协调层、分区计算层、物理判定层等模块,结合微服务化、快照同步和Kubernetes调度,实现玩家跨区无感知迁移与一致判定。重点优化动态负载均衡、状态同步算法及容灾备份,依托分布式数据库与多云部署保障高可用性,为同类游戏提供可扩展的技术范本。(149字) 关键词: 无缝大世界、分布式服务器、动态分区、

本博客聚焦游戏开发技巧、创业实战心得及大学热门课程干货。这里既有技术深度,也有思维广度,无论你是开发者、创业者还是高校学子,都能在这里找到适合自己的成长之路! 562

小程序:滚动scroll-view和轮播图swiper

1.scroll-view ScrollView是可滚动的视图区域,直接使用ScrollView组件即可实现滚动效果。如下: 在wxml中使用scroll-view组件,组件里面用几个view视图显示。也可以放置文字或图片等内容。 <!-- demo.wxml --> <scroll-view> <view id="green" class='scroll-view...

tomorrownan的博客 4357

Slow waitForAckedSeqno took 64873ms (threshold=30000ms). File being written

Slow waitForAckedSeqno took 64873ms (threshold=30000ms). File being written

zhengzaifeidelushang的博客 2011

RK3588平台开发系列讲解(SARADC篇)SARADC的工作流程

📢本篇将介绍SARADC的源码分析和工作流程。

内核笔记 3230

【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)

微信小程序常用组件学习!!

苏凉.py的博客 1842

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

微信小程序如何实现scroll-view隐藏滚动条

网页开发的时候往往会为了页面的美观,而选择去掉滚动区域默认的滚动条。微信小程序实现scroll-view隐藏滚动条的方法之一: 首先我们来看一下,scroll-view的一些属性组件 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 heig...

chengyunkua2890的博客 710

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

十八.局部滚动组件 scroll-view

微信小程序可滚动视图区域 scroll-view 可滚动视图区域. 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px), 触发scrolltoupper事件 lower-threshold N...

weixin_43167546的博客 661

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

微信小程序scroll-view(滚动组件)与onPullDownRefresh(下拉刷新)

一.官方api描述 在滚动scroll-view时会阻止页面回弹,所以在scroll-view中滚动,是无法触发onPullDownRefresh 查阅大量资料以后发现一共有三种方式: 1.使用view代替scroll-view,从而触发onPullDownRefresh 2.在scroll-view标签上新建一个隐藏的view标签,使用scroll-view标签中bindsc...

weixin_30315723的博客 1176

小程序实现滚动

小程序的滚动是开发中常用的一个组件。它分为横向滚动和纵向滚动。 试图容器中的 scroll-view组件 是可滚动视图区域。 其中属性 scroll-y 是纵向滚动使用属性, scroll-x 是横向滚动使用属性。 以下是使用示例: 纵向滚动(scroll-y): 下面是.wxml代码,设置可滚动区域和滚动区域内的元素: <view> <text>纵向滚动</...

anaerobic_me的博客 2588

uniapp使用scroll-view自动计算剩余高度实现滚动效果

uniapp使用scroll-view自动计算剩余高度

qq_43640535的博客 2408

小程序界面布局出现滚动条、滚动组件的坑、flex布局的坑

刚接触小程序不久,在公司琢磨了好久,发现了几个小程序的坑。 1.界面中明明设置了overflow:hidden和高度:100%,结果在真机测试的时候,界面就是出现滚动条的情况。 这种情况需要在加一个page样式: page{ overflow: hidden; height: 100%; } 这样就能解决问题了。 2.使用scroll-view组件的时候,总是显示不齐所有的内容,这是由于对于scroll组件,我们都是设置了固定的高度,和overflow:hidden的样式,如果要显示齐所有的内容,

weixin_45172119的博客 3401
上一篇: 小程序监听屏幕滚动 判断滚动方向上下滚动且滚动到一定位置
下一篇: 小程序onPageScroll上滑显示,下滑隐藏
Zan^Z
博客等级 码龄7年 27粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值