微信小程序 - 拖动页面产生移动动画

最新推荐文章于 2024-09-06 18:23:44 发布

小安吖~

最新推荐文章于 2024-09-06 18:23:44 发布

阅读量550

点赞数 8

文章标签：微信小程序服务器小程序

本文链接：https://blog.csdn.net/Aan___/article/details/134816715

版权

本文介绍了如何在微信小程序中禁用页面的下拉刷新功能，并通过JavaScript和WXML实现内容区域的滚动动画效果。开发者需在app.json中设置`enablePullDownRefresh`为false，并在wxml和js文件中处理触摸事件以控制滚动行为。

摘要由CSDN通过智能技术生成

1. 去除整个页面的下拉移动，否则无法生效：

在 app.json 页面，为 "window" 对象的 "enablePullDownRefresh" 属性设置属性值为 false

"window":{
    "navigationBarBackgroundColor": "#d43c33", //设置导航栏的背景颜色
    "navigationBarTextStyle":"white",  //自定义导航栏标题的颜色和字体样式
    "navigationBarTitleText":"云音乐", //指定导航栏的标题文本
    "backgroundColor":"#fff",    //设置整个小程序的背景颜色
    "enablePullDownRefresh": false  //是否允许所有页面进行下拉刷新
}

2. 编写内容

wxml页面：

<view class="personalContainer">
    <viewclass="user-section"></view>
    <view class="covercontainer"
        bindtouchstart="handleTouchStart"  // 绑定触摸触发事件
        bindtouchmove="handleTouchMove"    // 绑定触摸移动事件
        bindtouchend="handleTouchEnd"      // 绑定触摸结束事件
        style="transform:{{coverTransform}};transition:
        {{coverTransition}}"
    >
    </view>
</view>

js页面：

let startY = 0;  //起始坐标
let moveY = 0;  //移动坐标
let moveDistance = 0;//移动距离
Page({
    data:{
        coverTransform: "translateY(0rpx)",
        coverTransition: "",
    },
    onLoad: function (options) {},
    handleTouchStart(e) {
        // 触摸时触发
        startY=e.touches[o].clientY;
        // 触摸时先行清空移动动画，防止下拉触发有问题
        this.setData({
            coverTransition: ''
        });
    },
    handleTouchMove(e){
        // 触摸移动时触发
        moveY = e.touches[0].clientY;
        moveDistance = moveY-startY;
    
        //边界判断
        if (moveDistance <= 0) return; // 向上滑动不处理
        if (moveDistance > 80){
            // 下拉限度为 80
            moveDistance = 80;
        }
        this.setData({
            coverTransform:`translateY(${moveDistance}rpx)`,
        });
    },
    handleTouchEnd(e){
        // 触摸停止后触发
        this.setData({
            coverTransform: `translateY(0rpx)`,
            coverTransition: 'transform 2s linear',  //实现内容动画移动返回
        });
    },
});