zoukankan      html  css  js  c++  java
  • vue中使用better-scroll滚动无效

    安装

    npm install better-scroll --save

    调用:

    //重要是这两个标红的class类名 
    <div class="wrapper recommend" ref="wrapper"> <div class="content recommendHeight"> <h2 class="recommendSinge">推荐歌单</h2> <ul class="recommendContent"> <li class="ContentLi" v-for="item in playList" :key="item.id"> <div class="text"> <p class="textContent">{{item.name}}</p> </div> </li> </ul> </div> </div>
    import BScroll from "better-scroll";
     // 获取推荐歌单
        _getRecommendList() {
          getRecommendList().then(res => {
            if (res.status === this.$ERR_OK) {
              this.playList = res.data.result;
              this.$nextTick(() => {
                if (!this.scroll) {
                  this.scroll = new BScroll(this.$refs.wrapper, {});
                  this.scroll.on("touchEnd", pos => {
                    // 下拉动作,下拉刷新 重新获取数据
                    if (pos.y > 50) {
                      this._getRecommendList();
                    }
                  });
                } else {
                  this.scroll.refresh();
                }
              });
            } else {
              console.error("getRecommendList 获取失败");
            }
          });
        }
      mounted() {
        this._getRecommendList();
      }

    遇到一个比较坑的问题就是布局问题 上边的步骤引进这个插件 也正确调用了,但死活就是不能拉,拉不动,上网搜了很多方法也没用 后来无意中看到一个是说要给wrapper定位

    .wrapper{
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
    }

    就,就 真的好了 太坑了

  • 相关阅读:
    图片自适应居中
    常用正则记录
    继承
    HTML学习
    js原型与原型链理解
    mac 及mac下开发常用快捷键命令
    服务器返回的各种HTTP状态码介绍(转)
    webstorm使用笔记
    《Javascript Dom 高级程序设计》读书笔记
    ECMAScript6学习笔记
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/13195996.html
Copyright © 2011-2022 走看看