<template>
<div>
<div>
<h2 class="h2">{{msg}}</h2>
</div>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
<li>世界上究竟谁是计算机技术</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from ‘better-scroll‘
export default{
data(){
return{
msg:"better-scroll的使用",
arrList:[]
}
},
methods:{
_initScroll (){
let scroll = new BScroll(this.$refs.wrapper,{ // 或者添加 v-el:food-wrapper 用this.$els.foodWrapper//获取对象
scrollY: true,
click: true,
scrollY:true,
probeType:1
})
}
},
mounted(){
this.$nextTick(() => { // 3 在这个函数中调用以防内容还未加载完就执行,获取不到元素的高度导致无法滑动
this._initScroll()
})
this.$http.get(‘./../index.data‘).then(function(res){
console.log( res.data);
setTimeout(function(){
_this.arrList=res.data;
},1000);
}).catch(function(err){
console.log(err);
});
}
}
</script>
<style scoped>
.h2{
width: 100%;
height: 44px;
border-bottom: 1px solid #3171F6;
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
line-height: 44px;
background: #fff;
}
.wrapper{
padding: 44px 0;
height: 800px;
overflow: hidden;
}
</style>
容器一定要设定高度,不然无法滚动