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; }
就,就 真的好了 太坑了