better-scroll的使用

Posted 2020-10-22 面朝阳光/

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

　　容器一定要设定高度，不然无法滚动