zoukankan      html  css  js  c++  java
  • better-scroll使用参考

    ************better-scroll是基于父元素固定高度,溢出才滚动的,所以父元素务必定高,否则无法滚动*********************************************
    *第一步引入
    ——————参考https://ustbhuangyi.github.io/better-scroll/#/examples/en
    _____https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/property.html
    ——————CDN方式
    https://unpkg.com/better-scroll/dist/bscroll.min.js
    *第二步(记得加上dropDown变量)因为是基于touchEnd事件,所以不必需要scrollIndex(为了保证每次加载只执行一次数据的控制)
    this.scroll = new BScroll('.addFriends',{
    scrollY: true,
    click: true
    });
    console.log(this.scroll.maxScrollY,'66');
    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("加载更多");
    // this.scrollIndex++;
    // if(this.scrollIndex == 1){
    this.loadNextPage();
    // }
    //使用refresh 方法 来更新scroll 解决无法滚动的问题
    this.scroll.refresh()
    }
    console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
    })
  • 相关阅读:
    MySql概念(二)
    MySql数据库概念
    python并发编程之多进程
    python之进程与线程
    python之udp协议的套接字
    python之socket编程
    python之异常处理
    python之面向对象的高级进阶
    react中使用orgchart组织结构插件
    【react从入门到放弃】ant design pro + dva [第一篇]
  • 原文地址:https://www.cnblogs.com/holy-amy/p/10009059.html
Copyright © 2011-2022 走看看