文章 2024-07-01 来自:开发者社区

微信小程序—页面滑动,获取可视区域数据

需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素如下简单html结构//列表 // 每个条目 {{ item.nam...

文章 2023-07-11 来自:开发者社区

微信小程序实现左右滑动进行切换数据页面(touchmove)

目录场景事件的属性方法实战左右滑动场景手指触摸左右滑动进行切换数据需要实现的是有一个tab栏,点选某一个tab的时候切换页面,手势滑动,左滑右滑效果和点击tab一样切换页面数据。事件的属性方法这里我们要先了解几个微信的事件属性touchstart : 手指触摸动作开始touchmove:手指触摸后移动touchcancel:手指触摸动作被打断,如来电提醒,弹窗touchend: 手指触摸动作结束....

微信小程序实现左右滑动进行切换数据页面(touchmove)

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

产品推荐

{"cardStyle":"productCardStyle","productCode":"aliyun","productCardInfo":{"productTitle":"10分钟搭建微信小程序","productDescription":"本方案为您介绍如何在阿里云快速部署博客网站,并将网站服务快速应用到微信小程序。","productContentLink":"https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes","isDisplayProductIcon":true,"productButton1":{"productButtonText":"方案详情","productButtonLink":"https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes"},"productButton2":{"productButtonText":"方案部署","productButtonLink":"https://help.aliyun.com/document_detail/2856534.html"},"productButton3":{"productButtonText":"查看更多技术解决方案","productButtonLink":"https://www.aliyun.com/solution/tech-solution/"},"productPromotionInfoBlock":[{"$id":"0","productPromotionGroupingTitle":"解决方案推荐","productPromotionInfoFirstText":"高效构建企业门户网站","productPromotionInfoFirstLink":"https://www.aliyun.com/solution/tech-solution/build-a-website","productPromotionInfoSecondText":"从 HTTP 到 HTTPS 让网站更安全","productPromotionInfoSecondLink":"https://www.aliyun.com/solution/tech-solution/ssl"}],"isOfficialLogo":false},"activityCardInfo":{"activityTitle":"","activityDescription":"","cardContentBackgroundMode":"LightMode","activityContentBackgroundImageLink":"","activityCardBottomInfoSelect":"activityPromotionInfoBlock"}}

阿里小程序云

阿里小程序云官方技术圈

+关注