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

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

摘要生成于 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'
    })
  },
})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值