码迷,mamicode.com
首页 > 其他好文 > 详细

vue中使用better-scroll滚动无效

时间:2020-06-26 20:15:37      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:absolute   rap   next   调用   vue   OLE   data   很多   bsp   

安装

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;
}

就,就 真的好了 太坑了

vue中使用better-scroll滚动无效

标签:absolute   rap   next   调用   vue   OLE   data   很多   bsp   

原文地址:https://www.cnblogs.com/yanyanliu/p/13195996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!