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

肖肖冲鸭

于 2022-07-04 11:49:12 发布

阅读量819

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序 javascript 开发语言

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在personal.js中实现效果

let startY=0
let moveY=0
let moveDistance=0
Page({
   
  data: {
   
    coverTransform:'translateY(0)',