列表下拉动画及刷新（微信小程序）

列表下拉动画及刷新（微信小程序）

1.效果描述：下拉、松手、自动还原（一般用于刷新作用）
2.三个事件：

 bindtouchstart 手指按下触发
 bindtouchmove 手指滑动触发（持续性的）
 bindtouchend 松开手指触发

3.案例：
aaa.wxml文件

<view class="daily-song-con" 
bindtouchstart="handlerStart"
bindtouchmove="handlerMove"
bindtouchend="handlerEnd" 
style="transform: {{transform}}; transition:{{coverTransition}}">
</view>

aaa.js文件

import request from '../../utils/request'
let startY = 0;//手指起始位置
let moveY = 0;//手指移动位置
let moveDistance = 0;//手指移动的距离
Page({

    /**
     * 页面的初始数据
     */
    data: {
        topbg:"https://p1.music.126.net/b_xx7JRbTvFOXBQTByS4Yg==/18808245906747912.jpg",
        day:"",
        mouth:"",
        songsList:[],
        transform:"translateY(0)",//滑动的距离（y轴滑动0rpx）
        coverTransition:"",//滑动之后的回弹
        isCover:false//判断是否滑动（false表示滑动）
    },
    handlerStart(event){//当手指按下时触发
        //获取手指真正的起始位置
        startY = event.touches[0].clientY;
        this.setData({
            coverTransition:'',
            isCover:false
        })
    },
    handlerMove(event){//当手指移动时触发
        moveY = event.touches[0].clientY;
        //移动的位置减去起始的位置
        moveDistance = moveY - startY;
        //往上滑动的BUG
        if(moveDistance < 0){
            return;
        }
        //滑动距离过远的BUG
        if(moveDistance >= 100){
            this.setData({
                isCover:true
            })
            return;
        }
        this.setData({
            // 注意这里的``符号
            transform:`translateY(${moveDistance}rpx)`
        })
    },
    handlerEnd(){//松开手指时触发
        this.setData({
            transform:`translateY(0rpx)`,
            // 实现动画显隐
            //三个属性值分别：①变换的属性（指定过渡动画的CSS属性名称，必须是变化的属性）；
                            //②动画时间；
                            //③动画执行方式（ease：逐渐慢下来；linear：匀速；ease-in：由慢到快；ease-out：由快到慢；ease-in-out：先慢到快再到慢。）
            coverTransition:'transform 0.7s linear'
        })
        //动画效果执行完成之后再刷新歌单
        setTimeout(async ()=>{
            //判断是否该更新歌单
            if(this.data.isCover){
                let songs = await request("/recommend/songs",{});
                console.log(songs);                 this.setData({
                    songsList:songs.data.dailySongs
                });
            }
        },700); 
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad:async function (options) {
        let songs = await request("/recommend/songs",{});
        console.log(songs); 
        //获取当前时间
        this.setData({
            mouth:new Date().getMonth()+1,//获取当前月份
            day:new Date().getDate(),//获取当前日期
            songsList:songs.data.dailySongs
        });
    }
})