微信小程序个人中心页下拉回弹效果实现

最新推荐文章于 2025-05-13 21:34:19 发布

原创最新推荐文章于 2025-05-13 21:34:19 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端 #小程序

本文介绍如何在微信小程序中实现个人中心页面的下拉回弹效果。通过监听触摸事件并应用动画，使得指定区域可以响应用户的下拉操作，并在释放后自动回弹到原始位置。

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

实现微信小程序个人中心页面的某个区域的下拉回弹效果。例如以下代码代表需要下拉回弹的区域：

给这个区域加上事件：手指触发的时候事件、手指移动的事件、手指松开的事件。同时加上动画的样式。

<view class="cover-container" 
    bindtouchstart="handleTouchStart"
    bindtouchmove="handleTouchMove" 
    bindtouchend="handleTouchEnd" 
    style="transform: {{coverTransform}}; transition: {{coverTranstion}};">
</view>

下面是js文件中的部分：首先声明三个变量，代表不同的坐标。之后通过动画实现下拉移动，动画实现回弹。

// pages/persion/persion.js
let startY=0;//手指起始的坐标
let moveY=0;//手指移动的坐标
let moveDistance=0;//手指移动的距离
Page({

  /**
   * 页面的初始数据
   */
  data: {
    coverTransform:'translateY(0)',
    coverTranstion:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
  },
  handleTouchStart(e){
    this.setData({
      coverTranstion:''
    })
    //手指起始的坐标
    startY=e.touches[0].clientY;
  },
  handleTouchMove(e){
    moveY=e.touches[0].clientY;
    moveDistance=moveY-startY;
    // console.log(moveDistance);
    if (moveDistance<0) {
      return;
    }
    if (moveDistance>=80) {
      moveDistance=80;
    }
    // 动态更新coverTransform的值
    this.setData({
      coverTransform:`translateY(${moveDistance}rpx)`
    })
  },
  handleTouchEnd(){
    // console.log("end");
    this.setData({
      coverTransform:`translateY(0rpx)`,
      coverTranstion:'transform 1s linear'
    })
  },
})