vue移动端 better-scroll插件完成上拉加载更多

最新推荐文章于 2021-09-21 22:47:47 发布

栋栋很优秀啊

最新推荐文章于 2021-09-21 22:47:47 发布

阅读量521

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dongdongaa0/article/details/104084776

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

better-scroll 来做下拉刷新和上拉加载特别方便。可直接复制在vue-cli中使用步骤：
一、下载 better-scroll

	npm install better-scroll -S

二、组件中引入

	<template>
<div class="rules">
    <p class="drop-down" v-if="dropDown">松手刷新数据...</p>
    <div class="bscroll" ref="bscroll">
        <div class="bscroll-container">
            <ul>
                   <li v-for='(item,index) in list' :key='index'>
                       {{item}}
                   </li>
            </ul>
        </div>
    </div>
    <p class="x" v-if='up'>加载更多...</p>
</div>
</template>


	<script>
	import BScroll from 'better-scroll'
	export default {
	    data(){
	        return{
	            dropDown:false,
	          up:false,
        list:[1,2,3,4,5,6,6,7,8,9,10,11,12,13,14,15,1,2,3,4,5,6,6,7,8,9,10,11,12,13,14,15]
    }
},
mounted(){
    this.scrollFn()
},
methods:{
    scrollFn(){
        this.$nextTick(() => {
            if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.bscroll, {
                    click: true,
                    scrollY: true,
                    probeType: 3
                });
            }else{
                this.scroll.refresh();
            }
            this.scroll.on('scroll', (pos) => {
                console.log(pos.y,this.dropDown)
                //如果下拉超过50px 就显示下拉刷新的文字
                if(pos.y>50){
                    this.dropDown = true
                }else{
                    this.dropDown = false
                }
            })
            //touchEnd（手指离开以后触发） 通过这个方法来监听下拉刷新
            this.scroll.on('touchEnd', (pos) => {
                // 下拉动作
                if(pos.y > 50){
                    console.log("下拉刷新成功")
                    this.dropDown = false
                }
                //上拉加载 总高度>下拉的高度+10 触发加载更多
                if(this.scroll.maxScrollY>pos.y+20){
                    console.log("加载更多")
                    this.up=true;
                     setTimeout(()=>{
                    //使用refresh 方法 来更新scroll  解决无法滚动的问题
                    this.list.push('一','二','三','四','五','六','七','八','九','十')
                    this.scroll.refresh();
                    this.up=false;
                    },1000)
                   
                }
                console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
            })
            console.log(this.scroll.maxScrollY)
        });
    }
}
}
	</script>

	<style scoped>
	.bscroll{
width: 100%;
height:500px;
overflow: hidden;
}
.bscroll-container{
background: #ff0000;
}
.drop-down{
position: absolute;
top:0px;
lefT:0px;
width: 100%;
height: 50px;
line-height:50px;
text-align: center;
font-size:20px;
color:#CCC;
}
.x{
 width: 100%;
height: 50px;
line-height:50px;
text-align: center;
font-size:20px;
color:#CCC;
}
</style>