zoukankan      html  css  js  c++  java
  • vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便。  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了

    <template>
        <div class="rules">
            <p class="drop-down" v-if="dropDown">松手刷新数据...</p>
            <div class="bscroll" ref="bscroll">
                <div class="bscroll-container">
                    <ul>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                       <li>1</li><li>1</li><li>1</li>
                    </ul>
                </div>
            </div>
            <!-- <p class="x">加载更多...</p> -->
        </div>
    </template>
    
    <script>
    import BScroll from 'better-scroll'
    export default {
        data(){
            return{
                dropDown:false
            }
        },
        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+10){
                            console.log("加载更多")
                            //使用refresh 方法 来更新scroll  解决无法滚动的问题
                            this.scroll.refresh()
                        }
                        console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
                    })
                    console.log(this.scroll.maxScrollY)
                });
            }
        }
    }
    </script>
    
    
    <style scoped>
    .bscroll{
         100%;
        height:500px;
        overflow: hidden;
    }
    .bscroll-container{
        background: #ff0000;
    }
    .drop-down{
        position: absolute;
        top:0px;
        lefT:0px;
         100%;
        height: 50px;
        line-height:50px;
        text-align: center;
        font-size:0.8rem;
        color:#CCC;
    }
    </style>
    

      

  • 相关阅读:
    java enum类
    mvn filter autoconfig 产生自动配置
    Spring与Quartz的整合实现定时任务调度 以及crontab的用法
    网络广告术语CPC、CPM和CTR的含义和关系
    spring mvc3的注解@ResponseBody 自动返回jason
    Google Guava14.0 瓜娃学习笔记
    java中的各个数据结构区别
    org.apache.http.client.HttpClient; HttpClient 4.3超时设置
    maven test 运行 指定类或方法 打包 mvn clean assembly:assembly
    为什么要做url encode
  • 原文地址:https://www.cnblogs.com/chengxiang123/p/9214641.html
Copyright © 2011-2022 走看看