小程序列表项下拉跟随手指移动，松开回弹效果实现

最新推荐文章于 2024-11-27 00:45:00 发布
原创 最新推荐文章于 2024-11-27 00:45:00 发布 · 864 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #javascript #开发语言

本文介绍如何实现小程序列表项在手指下拉时跟随移动，上滑固定，松手后自动回弹到初始位置的功能。通过绑定个人中心页面（personal.wxml）的滑动事件，并在personal.js中处理相关逻辑。

在这里插入图片描述
需求：
实现下方列表跟随手指向下移动的效果，手指向上滑动，列表不动，松手后，列表回到初始位置
与手指滑动有关的api:
在personal.wxml列表容器中绑定手指滑动相关的三个事件
在这里插入图片描述
在personal.js中实现效果

let startY=0
let moveY=0
let moveDistance=0
Page({
   
   
  data: {
   
   
    coverTransform:'translateY(0)', //列表纵向移动的距离
最低0.47元/天 解锁文章
小程序手势：让半屏弹窗更顺滑
2202_75483062的博客
03-14 1552
这里用到的手势组件 pan-gesture-handler（拖动时触发）和 vertical-drag-gesture-handler（纵向滑动时触发），手势组件有以下属性，on-gesture-event：手势回调事件，should-response-on-move：是否响应当前手势的 move 阶段，simultaneous-handlers：指定需要协商的手势是哪几个，下面演示表示 pan 和 scroll 协同触发。，半屏的交互除了在页面内实现，也能跨页面实现，如常见的下沉式半屏交互。
【微信小程序】iOS设备微信小程序页面回弹效果：关闭还是保留？
最新发布
java专栏
11-30 2370
通过本文的学习，相信你已经掌握了如何在微信小程序中关闭或保留iOS设备的回弹效果。无论是使用页面级配置、组件，还是动态控制回弹效果，都有各自的适用场景和优势。你可以根据具体需求选择合适的方法，让小程序的用户体验更加完美！🌟如果你有任何问题或者更好的方法，欢迎在评论区留言交流。💖希望这篇文章能够帮助你在微信小程序开发的道路上更进一步，让小程序更加贴近用户需求，提升用户满意度！🚀好了，今天的分享就到这里啦！如果你还想了解更多微信小程序的开发技巧和最佳实践，记得关注我，我会持续更新更多有趣的内容。
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
XH_jing的博客
11-19 4360
前言： 现在很多程序上都有左滑删除的效果，其实实现很简单，今天我们主要来记录一下小程序的左滑删除的实现过程。 效果图： 实现效果： 当我们在该条记录上进行左滑操作时，整条记录跟着向左移动，同时右侧的删除按钮会显示出来。 当我们点击删除按钮时，就会把该条记录删除掉。 如果不想删除该记录，可以右滑取消，或者随意点击一个位置都可以使右侧的删除按钮隐藏回到原样。 设计思路： 首先在页面上每条 item 记录分为上下两层，上面的 view 包裹正常展示的内容，下面的 view 存放左滑的显示的内容； 元素移
cubic-bezier处理下拉和回弹
Front小思的博客
07-19 1363
* 下拉和回弹 * 1.关闭bounce避免ios端下拉冲突 * 2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉 * transition设置0.1秒延迟，让css来过渡这段空窗期 * 3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-be...
微信小程序开发详解---小知识，大功能【实现按钮的随着手指移动】
qq_26585943的博客
02-09 4279
一.功能点说明 1. 获取屏幕的宽和高 var windowWidth = wx.getSystemInfoSync().windowWidth; var windowHeight = wx.getSystemInfoSync().windowHeight; 2.设置图片全屏 wxss设置：width: 100%;height: 100vh; 切记height:100%是不...
微信小程序个人中心页下拉回弹效果实现
TERMINUSL的博客
11-07 1672
微信小程序个人中心页下拉回弹效果实现
android listview 下拉回弹刷新效果
11-09
总之，实现Android ListView的下拉回弹刷新效果，需要结合SwipeRefreshLayout组件、事件监听、自定义动画和性能优化等多个方面。通过这些技术，你可以为你的APP增添类似QQ空间和新浪微博的互动体验，提升用户的使用...
微信小程序之实现下拉刷新效果
XH_jing的博客
12-18 2432
本文章将主要介绍微信小程序如何实现简单的下拉刷新效果的，代码简单明了。 主要 api wx.showLoading(Object object) 显示 loading 提示框 wx.hideLoading(Object object) 关闭 loading 提示框 wx.startPullDownRefresh(Object object) 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。 wx.stopPullDownRefresh(Object object) 停止当前页面下拉.
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
热门推荐
薇z的博客
08-28 1万+
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
微信小程序-禁止页面下拉回弹
1234Wu--前端Blog
05-10 3705
微信小程序-禁止页面下拉回弹,主要是。
微信小程序实现手势滑动效果
12-29
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下 wxml: index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 var interval = ;// 记录/清理时间记录 var touchMoveX = 0
自定义View 跟随手指滑动
11-02
自定义View 跟随手指滑动 手指抬起后 自动吸附屏幕边缘
小程序下拉刷新及回弹
真是个老机灵鬼的博客
07-29 1770
下拉刷新 在页面配置文件中加入 "enablePullDownRefresh": true, 2.js部分及下拉回弹 onPullDownRefresh事件监听用户下拉 主动调用wx.stopPullDownRefresh()事件回弹 /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { //业务代...
html回弹效果,微信小程序 transform 实现 惯性滚动，回弹效果 【下拉回弹】
weixin_39629269的博客
06-03 1208
1. 新建Scroll文件2. 在Scroll/index.wxml文件中写入如下代码style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">你好，我想实现 “惯性滚动，回弹效果”，请下拉我3. 在Scroll/index.js 文件中写入如下代码Page({data: {starty: ...
【微信小程序】自定义组件--跟随手指滑动的进度条
川川的博客
08-01 6685
先上gif图 我们在做商城一类的小程序的时候，会遇到评价订单或者评价人员的需求。目前市面上常见的是对订单或则人员进行星级评价，如下图 如果我们要换一个实现方式，用拖动进度条来评价，要怎么做呢？ 我们想，当手指触摸到滑块、移动滑块和抬起手指，微信小程序肯定会有相应的事件来记录或者捕捉。 根据文档我们可以查阅到这三个事件 1.touchstart 手指触摸动作开始 2.touchmove 手指触摸...
微信小程序手指拖动 出现滑动下拉效果
爬楼梯的前端小白的博客
07-03 1121
该效果类似于电商小程序左侧滑动下拉的效果 scroll-y属性：允许纵向y轴滑动 scroll-x属性：允许横向x轴滑动 注意！使用竖向滚动时 必须给scroll-view一个固定高度 制作滚动效果图 wxml部分： <scroll-view class="gundong" scroll-y> <view>a</view> <view>b</view> <view>c</view> </scro
小程序加入下拉回弹效果
weixin_40762926的博客
06-07 715
效果图
【微信小程序】常见问题-ios设备页面回弹开关
墨夶的博客
11-27 2103
通过上述方法，开发者可以根据具体需求选择合适的方式来关闭或控制微信小程序在iOS设备上的页面回弹效果。每种方法都有其适用场景，合理选择可以有效提升用户体验。希望这些方法能帮助你更好地管理页面滚动行为，提升小程序的整体质量。
微信小程序开发——点击按下时变色，松开后恢复（hover-class，或【：after】使用）
番薯大佬的专栏
02-13 8254
界面交互中，按下时改变颜色主是设置组件的hover-class属性的style样式值。 1、点击按下前，按下松开后样式 2、点击按下后样式 代码示例设置 wxml文件 <view class="cellstype" hover-class="cellhoverstyle" bindtap="itemclick" data-item="{{item}}"> wxss文件 .cellhoverstyle { color: red; } ...
Jellyball下拉背景设计加入松开回弹效果
2. 下拉背景动画效果：下拉背景是用户在触摸设备屏幕上进行下拉操作时，屏幕上背景视图跟随手指运动所展示的动态效果。在很多现代移动应用和网页设计中，为了提升用户体验和视觉效果，开发者会使用特殊的下拉背景...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值