zoukankan      html  css  js  c++  java
  • better-scroll初体验

    很多人在使用vue-cli开发项目的时候,在涉及到上拉下拉加载事件的时候,很多人会使用better-scroll,出于好奇,写了个小demo来测试了一下。

    安装:npm install --save better-scroll

    代码如下:

    <template>
      <div class="wrapper" ref="wrapper">
        <ul class="content">
          <li v-for="item in 40">{{item}}</li>
        </ul>
      </div>
    </template>
    <script>
    import BScroll from 'better-scroll'
    export default {
      name: 'hello',
      data () {
        return {
    
        }
      },
      mounted () {
        let dom = this.$refs.wrapper;
        this.$nextTick(() => {
          this.scroll = new BScroll(dom, {
            scrollY:true,
          })
          this.scroll.on('scrollEnd',(pos) => {
            console.log(pos)
          })
        })
      }
    }
    </script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .wrapper{
        width: 100%;
        height: 667px;
      }
    </style>

    这里要特别注意的是wrapper要设置高度才行,否则不会生效,第一次使用的时候,在这里吃亏了。

  • 相关阅读:
    day-8 xctf-guess_num
    CTF导引(一)
    day-7 xctf-level2
    day-6 xctf-hello_pwn
    day-5 xctf-when_did_you_born
    day-4 xctf-pwn CGfsb
    CrackMe_002
    如何将Map对象转换为一个实体类对象
    索引相关问题
    事务相关知识总结
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/8881432.html
Copyright © 2011-2022 走看看