• better-scroll的用法,及其中的一个属性event._constructed详解


    better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能。

    实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可滚动且没有滚动条。

    立即使用:

    <body>
      <div id="wrapper" ref="wrapperRef">
        <ul>
           <li>...</li>
           <li>...</li>
           ...
        </ul>
      </div>
    <script type="text/javascript" src="better-scroll.js"></script>
    <script type="text/javascript">
      new BScroll(document.getElementById('wrapper'));
    </script>
    </body>

    或者用ref

    this.boxScroll= new BScroll(this.$refs.wrapperRef, {
           click: true
        })

    样式

    .wrapper
        position: absolute
        top:183.5px
        bottom: 0
        left: 0
         100%
        overflow: hidden

     注意:

      better-scroll会将点击事件去掉,如果滚动部分需要有点击事件,需要在参数里加上click:true。

      同时,在PC上或某些手机端,由于未成功将touchend事件move掉,点击事件会执行两次

      better-scroll派发的event事件和原生js的event有属性上的区别,其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true,原生点击事件中没有这个属性。

    如果在better-scroll滚动的页面,有click点击事件,需要判断

      methods: {
          toggleFavorite(event) {
            if (!event._constructed) {
              return;
            }
            this.favorite = !this.favorite;
           
          },
  • 相关阅读:
    win7 x64怎么枚举所有快捷键呢
    C/C++多种方法获取文件大小
    中缀表达式转后缀表达式(逆波兰表达式)
    检测文件存在的四种方法
    透明窗口与不规则窗口制作方法总结
    Struts 2命令执行漏洞
    Windows 8 无法安装
    从浏览器启动客户端程序
    tesseractocr训练方法
    Algorithm Gossip: 中序式轉後序式(前序式)
  • 原文地址:https://www.cnblogs.com/fsg6/p/14374653.html
Copyright © 2020-2023  润新知