美文网首页
better-scroll的使用

better-scroll的使用

作者: 冬天的_太阳 | 来源:发表于2020-03-23 14:55 被阅读0次
    <template>
      <div class="wrapper" ref="wrapper">
       
          <ul class="content">
            <li>123456</li>
            <li>123456</li>
            <li>123456</li>
            <li>123456</li>
            <li>123456</li>
          </ul>
      
      </div>
    </template>
    
    <style  scoped>
    /* 对于需要滚动的 */
    .wrapper {
      position: fixed;
      left: 0;
      top: 80px;
      bottom: 0;
      width: 100%;
    
      overflow: hidden;
    }
    </style>
    
       // better-scroll开始
        // 初始化better-scroll得到scroll对象时必须保证DOM结构渲染完毕,
        this.$nextTick(() => {
          this.myScroll = new BScroll(this.$refs.wrapper, {
            scrollY: true,
            pullDownRefresh: {
              threshold: 50,
              probeType: 3
            },
            pullUpLoad: {
              threshold: 744
            }
          });
    
          this.myScroll.on("pullingDown", pos => {
            console.log("下拉刷新!", pos);
            this.$nextTick(() => {
              this.myScroll.refresh(); // DOM 结构发生变化后,重新初始化BScroll
            });
            this.myScroll.finishPullDown(); // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
          });
    
          this.myScroll.on("pullingUp", pos => {
            console.log("上拉刷新!", pos);
            this.$nextTick(() => {
              this.myScroll.refresh(); // DOM 结构发生变化后,重新初始化BScroll
            });
            this.myScroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
          });
        });
        // better-scroll  完毕
    

    相关文章

      网友评论

          本文标题:better-scroll的使用

          本文链接:https://www.haomeiwen.com/subject/vkswyhtx.html