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

    better-scroll是D8黄轶老师基于iscroll重写的一个插件,在vue中使用这个插件能给app带来流畅性,提高了用户体验。

    一、安装

    使用npm安装

      npm install better-scroll --save

    使用yarn安装

      yarn add  better-scroll

    二、html结构

    <div class="wrapper" ref="wrapper">
      <div class="content>
        <ul>
          <li></li>
        </ul>
      </div>
    </div>

    三、初始化

    首先要引入组件,需要dom结构加载完成时才执行初始化。因此,需要用上钩子函数created()或者mounted()。

    html解构如第二步

    import BScroll from 'better-scroll' mounted() { //即定时器 20ms this.$nextTick(() => { //$refs绑定元素 if(!this.scroll){ this.scroll = new BScroll(this.$refs.wrapper, { //开启点击事件 默认为false click:true }) // console.log(this.scroll) }else if(!this.$refs.wrapper){ return } else{ this.scroll.refresh() } }) }

    四、优点

    1.体验像原生:滚动非常流畅,而且没有滚动条。
    2.滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。

    ^_^     ^_^    

      

  • 相关阅读:
    学习方法与经验总结
    工具综合症?资料收集狂?
    SpringMVC 过滤器Filter使用解析
    Spring 管理Filter和Servlet
    pom.xml配置详解
    开发Java web应用程序的介绍
    java web构建学习(概念基础)
    题目1474:矩阵幂
    题目1473:二进制数
    Python strip()方法
  • 原文地址:https://www.cnblogs.com/BLOGZR/p/9949135.html
Copyright © 2011-2022 走看看