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

better-scroll的使用

时间:2018-01-26 20:56:42      阅读:724      评论:0      收藏:0      [点我收藏+]

标签:highlight   get   调用   top   ext   line   export   border   bsp   

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

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

 

better-scroll的使用

标签:highlight   get   调用   top   ext   line   export   border   bsp   

原文地址:https://www.cnblogs.com/qq735675958/p/8360853.html

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