vue中利用scroll+js实现一个下拉刷新的功能

最新推荐文章于 2025-02-20 15:43:35 发布

树上有俩猴

最新推荐文章于 2025-02-20 15:43:35 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42721326/article/details/89932019

本文介绍如何在Vue.js应用中结合JavaScript实现下拉刷新功能。通过监听滚动事件，当用户下拉到页面顶部时，触发数据更新，从而实现页面内容的实时刷新。

<div class="page" ref="scroll">//用scroll把想要滚动的地方包裹起来
    <div class="wrap">         //这个是被包裹的盒子
        <div class="refresh">  //显示出来的刷新页面
            //这里用了vant里面的刷新图标
//
            <van-icon :name="iconName" :class="{active:canRefresh,rotate:iconName === 'replay'}"/>
            //请求刷新的文本
            <span>{{refreshText}}</span>
        </div>
        <div class="main">
            <p>页面的主要内容</p>
        </div>
    </div>
</div>

export default {
    //数据的初始状态
    data(){
        return{
            canRefresh:false,                
            refreshText:"下拉可以刷新...",    
            iconName:"arror-down"
        }
    },
    mounted(){
    //构建滚动视图
    let scroll = new BScroll(this.$refs.scroll)
        startY:-40, //初始位置设置为-40 让上边的刷新框隐藏起来,等到刷新的时候在展现出来
        probeType:3 //betterScroll 的一个属性 记住设置3就行了
    };
    //刷新滚动视图
    scroll.on('scrollStart',()=>{
        scroll.refresh();
    })
    scroll.on('scroll',()=>{
        if(scroll.y >= 0){       //按下鼠标开始刷新时
            this.canRefresh = true,
            this.refreshText = "释放立即刷新"
        }else{
            this.canRefresh = false,
            this.refreshText = "下拉可以刷新"
        }
    })
    scroll.on('scrollEnd',()=>{//scrollEnd 当松开鼠标时 没超过40就让他弹回去 超过才执行刷新 
        if(scroll.y > -40 && scroll.y < 0){
            this.iconName = "arr-down"
            scroll.scrollTo(0,-40,300)
        }else if(scroll.y >= 0){
            this.refreshText = "正在刷新..."
            this.iconName = "replay"
            scroll.scrollTo(0,0,300)
        }
    })
}